使用 jQuery 和 Form 插件引用 JSON 响应对表单数据的 POST答案

【问题标题】：Referencing JSON response to POST of form data with jQuery and the Form plug-in使用 jQuery 和 Form 插件引用 JSON 响应对表单数据的 POST
【发布时间】：2009-10-07 18:06:18
【问题描述】：

我无法理解如何使用 jQuery 及其表单插件来访问 HTTP 发布操作返回的数据。

例如，我想从浏览器以表单形式发布数据，在服务器上处理数据，向浏览器返回服务器响应（以 JSON 格式），并在警报中向用户显示有关该响应的信息-- 无需重写表单。

我认为下面的 jQuery 代码会这样做：

$(document).ready(function() {
    $('#ajaxFormSubmit').bind('click', function(event) {
        $('#data_entry_form').ajaxSubmit({
            url: "data_entry_ajax",
            dataType: "json",
            success: function(data) {
                alert('Success');
                alert(data.save_status);
            }
        });
    });
});

服务器在 JSON 对象中返回以下内容：

{'save_status': 'OK', 'id_number': 2}

但浏览器不会在表单和用户输入的数据上显示两个警报，而是清除表单并显示 JSON 回复。

我认为提交给 ajaxSubmit 的选项中的“成功”值自动传递了从服务器收到的响应。我尝试了将参数传递给函数体的各种排列方式（指的是 data 而不传递它，指的是 responseText 有和没有传递任何东西），但这些也不起作用。

我查看了“jQuery In Action”，试图了解访问对 xhr 对象和 .ajax() 函数的响应，但这也无济于事。

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

尝试使用jQuery $.post()

<script>
// ...
$('#ajaxFormSubmit').bind('click', function(event) {
  $.post(
    'data_entry_ajax',
    $('#data_entry_form').serialize(),
    function(data) {
      alert('Success');
      alert(data.save_status);
    },
    'json'
  );
});
</script>

【讨论】：

其实这仍然是清除浏览器文档并显示JSON请求。也许问题出在我的 HTML 中。