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

【问题标题】：Submit a form and get a JSON response with jQuery使用 jQuery 提交表单并获取 JSON 响应
【发布时间】：2011-02-26 23:14:05
【问题描述】：

我希望这很容易，但我在任何地方都找不到关于如何执行此操作的简单解释。我有一个像这样的标准 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>

我想让 javascript（使用 jQuery）将表单提交到表单的操作 (process_form.json)，并从服务器接收 JSON 响应。然后我将有一个响应 JSON 响应而运行的 javascript 函数，例如

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

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

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

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

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

Guffa 比我快 :)

【讨论】：

【解决方案2】：

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

例子：

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

请注意，您必须从处理提交事件的方法中返回false，否则表单也会被发布。

【讨论】：

【解决方案3】：

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

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

【讨论】：

这在提交使用 GET 而不是 POST 时很有用。您仍然需要在提交回调中添加return false。