6

$.ajaxユーザーがフォームを送信すると、get リクエストを実装しようとしています。

私が行っていることが最も効率的な方法 (クリックをフォーム ボタンにバインドする) であるかどうかはわかりません。より効率的な方法 (または標準的な方法) がある場合は、それを提案してください!

私の結果は、コンテンツ div が FF/Chrome で適切に埋められているということですが、IE はそうではありません。IE がフォームを送信し、ページ全体をリロードしているようです。

さらに、フォームを「送信」する必要があると本当に思っています。validate();これは、以下の実装 (FF/Chrome でも) では機能しない jQuery を利用したいからです。

Javascript :

$(document).ready(function(){

   $("#theForm").submit(function(){
       // build our data to send in our request
       var mydata = {method: "search", color: $('#color').val()};

       $.ajax({
           url: 'foo.php',
           data: mydata,
           type: 'get',
           dataType: 'json',
           success: function(data){
              $("#content").html(data);
           }
           error: function(e){
             console.log(e.message);
           }
       });
    return false;
   });
});

HTML :

<form id="search">
       <input type="submit" />
</form>

<div id="content"></div>
4

3 に答える 3

3

送信ボタンをボタンタイプに変更する必要があります。タイプ送信の入力は自動的にページを投稿しますが、あなたの場合、これは必要ありません。

<input type="button" id="search-button">

それ以外の場合は、 event.preventDefault()を使用してボタンのデフォルト アクションを防止できます。

$("#search-button").click(function(event){
    event.preventDefault();

    $.ajax({
        url: 'foo.php',
        data: mydata,
        type: 'get',
        dataType: 'json',
        contentType: 'application/json',
        success: function(data){
            $("#content").html(data);
        }
    });
});

サーバーから html が返されることを期待しているので、dataType期待している が実際には html であることを指定することをお勧めします。以前は json をdataType. サーバーに渡すデータのタイプを指定することもできます。contentTypeこの場合は json を使用するため、application/json.

コメントによると、dataType は json である必要があります。

あなたの$(document).ready(function() {});が閉じていないように見えることに気付きました。をお忘れのよう);です。これはコピペの問題ですか？

最新のコード編集の後、成功とエラーの間のコンマが欠落しているようです。

$.ajax({
    url: 'foo.php',
    data: mydata,
    type: 'get',
    dataType: 'json',
    success: function(data){
        $("#content").html(data);
    }, // <---
    error: function(e){
         console.log(e.message);
    }
});
于 2012-06-15T18:34:07.587 に答える
0

フォームの送信イベントにバインドし、デフォルトのイベントをキャンセルする必要があります。これは、フォームを送信しています（によって、event.preventDefault()または単にreturn false;、伝播も停止します）。

<form id="theForm">
<input type="submit" id="search-button">
</form>


$("#theForm").submit(function(){

 $.ajax({
    url: 'foo.php',
    data: mydata,
    type: 'get',
    dataType: 'json',
    success: function(data){
          $("#content").html(data);
      }
  });

  return false;
});

またjson、はの文字列'json'である必要があることに注意してくださいdataType。の使用を検討することもできますgetJSON()。また、コードから不要な文字をいくつか削除しました。

于 2012-06-15T18:35:27.230 に答える
0

最後に、独立した関数を呼び出してみました:

$.ajax({
    ...
    ,success: function(data){
        updCont(data)
    }
...
});
function updCont(htm){
    $("#content").html(htm);
}

この問題で数日を失いました! 悪夢は終わった。IE8 は外国のコンテンツを信頼しないので、AJAX からの新しいコンテンツの挿入を許可しないのに、既存の関数はより強力で、ブラウザのセキュリティの問題が少ないのでしょうか?

ええ、アクションが引き継がevent.preventDefault()れないようにするためにもチェックしてくださいsubmit()

于 2013-08-13T17:40:11.513 に答える