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

Question

我希望这很容易,但我没有找到如何做到这一点的简单解释.我有一个像这样的标准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)将表单提交给表单的action(process_form.json),并从服务器接收JSON响应.然后我会有一个javascript函数运行以响应JSON响应,比如

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

完成后如何连接表单提交按钮以调用我的form_success方法？它也应该覆盖浏览器自己的导航,因为我不想离开页面.或者我应该从表单中移出按钮来执行此操作？

Answer 1

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

例:

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

请注意,您必须false从处理提交事件的方法返回,否则表单也将被发布.

Answer 2

如果你需要POST请求,请使用jQuery.post()传递第四个参数"json"

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

Guffa比我快:)