ajax POST的奇怪问题

Question

我有这个带有表单的 html 页面

 <form  method="post" id="form1" name="form1" action="/status_comment/save">
 //Some text inputs
 <input type="text" name="new_comment" id="new_comment" onkeydown="post_comment(event,'13')" >
 </form>

这是我的 POST 调用的 javascript 函数

 function post_comment(event,item_id)
    {
     var keyCode = ('which' in event) ? event.which : event.keyCode;
     if(parseInt(keyCode)==13 && event.shiftKey!=1)
     {
       var str = $('#form1').serialize(); // Gets all the filled details
       $.post('/status_comment/save',
       str,
       function(data){
       alert(data);
       });
    }}

后端使用 Django 完成，这是返回语句

data=simplejson.dumps(data)
return HttpResponse(data, mimetype='application/json')

推荐网址是“/xyz”。

问题是，提交表单后，它会自动重定向到“/status_comment/save”页面，而不是停留在同一页面上。 我尝试了get方法，它工作正常，但不是POST方法。

我尝试调试它，所以将 post call 中的 url 更改为引用 url，然后它会刷新页面而不是什么都不做。

上面的函数里面的alert()命令也不起作用，所以它可能没有被输入。

我注意到有趣的事情，当查看 Web 开发人员控制台时，此页面中 POST 调用的发起者显示为“其他”，而 GET 调用和 POST 调用的发起者（在其他页面中，它的工作) 是“jquery-1.8.0.min.js:2”

有什么想法吗？谢谢...

Answer 1

首先，如果可以避免，您真的不应该尝试捕获 enter。使用submit 绑定。它让你的开发者伙伴变得更加明显和容易（我敢打赌，我不是唯一一个认为“KeyCode 13 是什么heck？”的人）。

我想知道是否更明确可能会有所帮助。你试过打电话给preventDefault和stopImmediatePropagation吗？

$('#form1').submit(function(evt) {
    evt.preventDefault();
    evt.stopImmediatePropagation();
    // serialize and be AJAXy yada yada yada

如果这不起作用，或者由于某种原因您更喜欢自己处理捕获 enter，那么除了 keydown 处理程序之外，您可能还需要上面的代码。所以它会是：

<input type="text" name="new_comment" id="new_comment" onkeydown="post_comment(event,'13')" >

...

$('#form1').submit(function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
}

function post_comment(event,item_id)
{
    event.preventDefault();
    event.stopImmediatePropagation();
  var keyCode = ('which' in event) ? event.which : event.keyCode;
  if(parseInt(keyCode)==13 && event.shiftKey!=1)
  {
    var str = $('#form1').serialize(); // Gets all the filled details
    $.post('/status_comment/save',
    str,
    function(data){
      alert(data);
    });
  }
}

Answer 2

首先从输入中删除onkeydown 属性：

<form method="post" id="form1" name="form1" action="/status_comment/save">
    //Some text inputs
    <input type="text" name="new_comment" id="new_comment" />
</form>

然后只需使用 jquery 订阅此表单的 .submit() 事件并在其中执行 AJAX 请求。不要忘记从中返回 false 以确保取消默认操作并且浏览器保持在同一页面上：

$('#form1').submit(function() {
    var str = $(this).serialize(); // Gets all the filled details
    $.post(this.action, str, function(data) {
        alert(data);
    });
    return false; // <!-- that's the important part
});