0

わかりましたので、私は理解できない本当に奇妙な問題を抱えています。私はこのjqueryコードを手に入れました：

HTML コード

<form>
  <input type="text" value="Search for a product" id="name" size="50">
  <input type="submit" id="submit" value="Search">
</form>

JavaScript コード

$("#loader").hide();
$(document).ready(function() {      
  $('#submit').live('click', function(event){
  $("#loader").ajaxStart(function(){
    $(this).show();
  });
  $("#loader").ajaxStop(function(){
    $(this).hide();
  });
  $('.product').remove();
  var query = $("#name").val(); 
  var searchQuery = query.replace(/ /g,"+");     
  $.get("APIsearch.php", {keyword: searchQuery}, function(data){
    $("#content").html(data);
  });  
}); 
});

ところで #loader は、ajax 呼び出し中に表示される単なる読み込み gif です。

ID「submit」のボタンをクリックすると、ID「name」のテキストフィールドから文字列が送信され、単語の間にスペースがある場所に + が挿入され、その文字列が APIsearch.php ページに送信されます。ここで、「contetn」divに読み込まれるいくつかのものを取得します。問題は、「入力」フィールドの周りに「フォーム」要素を追加すると、ajaxt が何も返さず、代わりに .submit を使い始めたいので、入力ボタンをテキストを提出することを選択します。このような「フォーム」要素を削除した場合にのみ機能するのはなぜですか?

<input type="text" value="Search for a product" id="name" size="50">
<input type="submit" id="submit" value="Search">
4

2 に答える 2

0

この行を #submit クリック メソッドの先頭に追加する必要があります。

event.preventDefault();

そうしないと、ajax 呼び出しを実行する代わりに、フォームが送信され、ページが更新されます。

ただし、Enterclickキーを押しても送信ボタンのイベントはアクティブにならないことに注意してください。これを行うには、独自のキー プレス ハンドラーを作成して、クリック コードを有効にする必要があります。

于 2012-08-30T16:19:51.503 に答える
0

フォームを送信すると、ページ全体が送信され、サーバー上で html 形式で応答する必要があります。あなたが言及したように、divを更新することはできません。

ただし、表示されたフォーム要素には「アクション」が指定されていません。これは、Ajax を使用してサーバーから情報を取得することを示しています。Ajax 応答の場合、'enter' キーが機能するようにプログラムできます。

$("#name").keyup(function(event){
    if(event.keyCode == 13){
        $("#submit").click();
    }
});
于 2012-08-30T16:16:48.707 に答える