0

我有这个带有表单的 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"

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

4

2 回答 2

2

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

我想知道是否更明确可能会有所帮助。你试过打电话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);
    });
  }
}
于 2013-01-26T18:35:13.027 回答
0

首先从输入中删除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
});
于 2013-01-26T18:04:47.833 回答