0

これは私のフォームです：

<form id="submitsearch" action="Classes/system/main/searchresult.php" method="POST">
Search by <span style="font-size:15px;">(developer, specialization, profession,major)</span>
    <input type="text" name="searchbox" id="searchbox" />
    in
    <select style="text-align:center;" name="countrysearch" id="countrylist">
        <option selected="selected" value="0">None</option>
        <option value="1">USA</option>
    </select>
<input style="margin-left:25px;" id="submitSearch" type="submit" value="Search"/>
</form>

これはAjaxjqueryコードです：

    $("#submitSearch").click(function(){

    $.ajax({type:'POST', url: 'Classes/requests/search.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) {
        $('#submitsearch').find('#pagePanel').html(response);

});

なぜ機能しないのですか？phpファイルは正常に正しい結果を返しています。

しかし、ajaxを使用して、リロードせずにIDが「pagePanel」の別のdiv内にロードしたいと思います。

何か助けはありますか？私はAjaxを初めて使用します。

編集：

    $("#submitbutton").click(function(){

    $.ajax({type:'POST', url: 'Classes/system/main/searchresult.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) {
        $('#pagePanel').html(response);

}})});

これは私と一緒にうまくいきました。

ご協力ありがとうございます。

4

6 に答える 6

1

タイプの入力がある場合はsubmit、:)を推測し、フォームを送信して、ページをリロードします。それを次のように変えてください：

<input style="margin-left:25px;" id="submitSearch" type="button" value="Search"/>

次に、実際にhtmlに要素があることを確認します。pagePanel

そして今、いくつかの提案：

  1. #submitsearchフォームとボタンを識別しないでください#submitSearch...混乱が生じる可能性があります
  2. .load()代わりにAJAXを使用.ajax()して、DIVで結果を直接取得できます。

それで：

$("#pagePanel").load('Classes/requests/search.php', {$('#submitsearch').serialize()});
于 2012-06-18T23:14:10.303 に答える
0

フォーム送信で ajax を使用する場合は、キャンセルする必要があります。

$("#submitSearch").click(function(event){
    $.ajax({type:'POST', url: 'Classes/requests/search.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) {
        $('#pagePanel').html(response);
    });  
    event.preventDefault();//prevents submitting of the form
}
于 2012-06-18T23:17:34.827 に答える
0

まず、デフォルトのフォーム送信を停止する必要があります。false送信ハンドラーで戻り、デフォルトを停止します。データを挿入するために find() を使用せずに、要素の ID を使用するだけです。あなたが見つけようとしている要素は、あなたのHTMLには表示されませんが、コードが示唆するフォーム内にあるべきです

$("#submitSearch").click(function(){

    $.ajax({type:'POST',
           url: 'Classes/requests/search.php', 
           data:$('#submitsearch').serialize(),
           cache: false, 
           success: function(response) {
                 $('#pagePanel').html(response);
            }
    })

    return false;

});
于 2012-06-18T23:19:24.030 に答える
0

ボタンを押した後submitのデフォルトの動作は、フォームを送信し、実際にフォームに指定したアクション URL に移動することです。今、あなたはその行動を防ぎたいと思っています。つまり、onsubmitフォームのイベントを見て、実際の送信を防ぐ必要があります。jQuery には、preventDefault()これを行うメソッドがあります。

あなたの場合、次のコードを追加するだけです。

$(document).ready(function() {
    $("#submitsearch").on("submit", function (e) {
        e.preventDefault();
    });        
});

そして、これを示す jsFiddle を次に示します。

明らかに、送信ボタンに対して同じことを行うことができます。e変数を引数としてclickイベントに追加しe.preventDefault()、実際の送信をキャンセルするために使用します (ただし、AJAX 要求は完全に実行できます)。

于 2012-06-18T23:21:23.123 に答える
0

ページに大量の HTML を送り返す代わりに、JSON オブジェクトのセットの形式で結果を送信し、結果に基づいて HTML を動的に作成することができます。これは、ブラウザに送り返されるデータが大幅に少なくなることを意味します。より効率的です。

于 2012-11-14T08:15:04.250 に答える
0

まず、閉じ括弧と中括弧がいくつかありません。ブラウザで開発ツールを実行して、コンソールにそのようなエラーがないか確認してください。私は通常 $.ajax を使用しません...通常は $.post を使用しますが、これまでのものを使用して、次のように書き換えます。

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

    var submitData = $(this).serialize();    
    $.ajax(
        {
            type:'POST', 
            url: 'Classes/requests/search.php', 
            data: submitData, 
            cache: false, 
            success: function(response) {
                $('#pagePanel').html(response);
            }
        }
    );
    return false;
});​
于 2012-06-18T23:23:35.907 に答える