javascript - 使用 jQuery 和表单插件引用对表单数据 POST 的 JSON 响应

Question

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

例如，我想从浏览器以表单形式发布数据，在服务器上处理数据，将服务器响应(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() 函数的响应，但这也没有帮助。

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