提交表单并通过jQuery获得JSON响应

我期望这很容易，但我没有在如何执行此操作的任何地方找到简单的解释。我有一个标准的HTML表单是这样的：提交表单并通过jQuery获得JSON响应

<form name="new_post" action="process_form.json" method=POST> 
     <label>Title:</label> 
     <input id="post_title" name="post.title" type="text" /><br/> 

     <label>Name:</label><br/> 
     <input id="post_name" name="post.name" type="text" /><br/> 

     <label>Content:</label><br/> 
     <textarea cols="40" id="post_content" name="post.content" rows="20"></textarea> 
    <input id="new_post_submit" type="submit" value="Create" /> 
</form>

我想了JavaScript（使用jQuery）提交表单到窗体的动作（process_form.json），并接收来自服务器的JSON响应。然后，我将有一个响应JSON响应运行的JavaScript函数，如

function form_success(json) { 
    alert('Your form submission worked'); 
    // process json response 
    }

如何联结起来的形式提交按钮打电话给我form_success方法完成时？此外，它应该重写浏览器自己的导航，因为我不想离开页面。或者我应该将按钮移出表单来做到这一点？

来源

2010-06-02 Leopd

如果你想在回调的响应，你不能发布形式。发布表单意味着响应作为页面加载。您必须从表单中的字段获取表单数据并发出AJAX请求。

例子：

$(function(){ 
    $('form[name=new_post]').submit(function(){ 
    $.post($(this).attr('action'), $(this).serialize(), function(json) { 
     alert(json); 
    }, 'json'); 
    return false; 
    }); 
});

请注意，您必须从处理该提交事件的方法返回false，否则的形式也将被公布。

来源

2010-06-02 18:16:46 Guffa

您是否尝试过使用.getJSON()和.serialize()？

$('form').submit(function() { 
    $.getJSON('ajax/test.json?' + $(this).serialize(), function(data) { 
     $('.result').html('<p>' + data.foo + '</p>' 
     + '<p>' + data.baz[1] + '</p>'); 
    }); 
});

来源

2010-06-02 18:16:09 gurun8

如果提交使用GET而不是POST这是非常有用的。你仍然需要在提交回调中添加'return false'。 – Max 2014-04-28 15:29:16

如果需要POST请求使用jQuery.post()传递第四个参数“JSON”

$(function(){ 
    $("form").submit(function(){ 
    $.post($(this).attr("action"), $(this).serialize(), function(jsonData){ 
     console.log(jsonData); 
    }, "json"); 
    }); 
});

Guffa是比我快:)

来源

2010-06-02 18:24:59 Anpher

提交表单并通过jQuery获得JSON响应

回答

相关问题