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完成的，这是return语句

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

推介网址是“/ xyz”。

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

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

上面函数中的alert（）命令也不起作用，因此可能没有输入。

有趣的是我注意到，在查看Web开发人员控制台时，此页面中POST调用的Initiator显示为“Other”，而GET调用和POST调用的启动器（在其他页面中，其工作正常））是“jquery-1.8.0.min.js：2”

有什么想法？感谢...

Answer 1

首先，你真的不应该尝试捕获输入，如果你可以避免它。使用submit绑定。它让你的开发人员更加明显和轻松（我打赌我不是唯一一个想到“ heck 是KeyCode 13的人吗？”）。

我想知道是否更明确可能有所帮助。您是否尝试过调用preventDefault和stopImmediatePropagation？

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

如果这不起作用，或者由于某种原因你更喜欢自己处理输入，那么你可能想要除了你的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
});

ajax POST的奇怪问题

2 个答案: