Javascript 使用jQuery提交表单并获取JSON响应

我希望这很容易，但我找不到一个简单的解释如何做到这一点。我有一个标准HTML表单，如下所示：

<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>

---

完成后，如何连接表单提交按钮以调用我的表单成功方法？它还应该覆盖浏览器自己的导航，因为我不想离开页面。或者我应该将按钮移出表单以执行此操作吗？

您是否尝试过使用

.getJSON（）

和

.serialize（）

$（'form'）。提交（函数（）{
$.getJSON（'ajax/test.json？'+$（this）.serialize（），函数（数据）{
$（'.result'）.html（''+data.foo+'
'
+“”+data.baz[1]+”
）；
});
});

---

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

例如：

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

---

请注意，您必须从处理提交事件的方法返回

false

，否则表单也将被发布。

如果需要POST请求，请使用传递第四个参数“json”

---

Guffa比我快：）

如果提交使用GET而不是POST，这将非常有用。您仍然需要将

returnfalse

添加到提交回调中。

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

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

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