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を使用して実行され、これはreturnステートメントです

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

紹介URLは「/xyz」と言います。

フォームが送信されると、同じページにとどまるのではなく、自動的に「/ status_comment/save」ページにリダイレクトされます。getメソッドを試しましたが、正常に動作しますが、POSTメソッドは動作しません。

デバッグを試みたので、呼び出し後の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を自分で処理したい場合は、キーダウン ハンドラーに加えて上記のコードを使用することをお勧めします。したがって、次のようになります。

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

.submit()次に、jquery を使用してこのフォームのイベントをサブスクライブし、そこで 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 に答える