0

なぜそれが得られないのかわかりません。いずれにせよ、これは信じられないほど私を苛立たせています。2つのjqueryブック、Webチュートリアル、およびスタックオーバーフローの投稿を調べましたが、まだ理解できません。

ユーザーがフィルターを選択できる検索フィルターバーを作成しようとしています。[結果を絞り込む]をクリックすると、クエリ出力が変更されます。

ユーザーがjquery/ajaxを使用して選択したフォームのラジオボックスの値を、ページを更新せずに入力に応じて結果を表示するphpページに送信するにはどうすればよいですか。

  1. フォーム->
  2. ユーザーがラジオボタンの値を選択し、[送信]->をクリックします
  3. フォームデータはjquery/ajaxを介して.phpページに送信され、その出力はページを更新せずに表示されます->
  4. .phpファイルはユーザー入力を処理し、それに基づいて出力を作成します

私は正直に多くの異なる答えを調べましたが、それらはすべて、読者が私よりもjavascript/jqueryの基本的な知識を持っていると想定しています。

同様に、送信ボタンの「onclick」を実行する関数にjQuery / ajaxを配置する必要がありますか？.clickまたは、ボタンIDのイベントハンドラーを追加するだけですか？

私が完全なjQuery/ajax noobであると仮定して、誰かが私にそれをすべて説明できますか？

4

1 に答える 1

2

送信ボタンがクリックされたときにフォームから発生する「送信」イベントに ajax 呼び出しをアタッチするだけです。

$('form').submit(function(e){
    e.preventDefault();
    $('.content').load(this.action+" .content", $(this).serialize(), function(){
        // code to execute after result display if needed
    });
    return false;
});

結果は「コンテンツ」クラスを持つ要素に表示されると想定しました。

  1. $('form')フォームを選択すると、それをパーソナライズできます
  2. .submitイベントハンドラーをフォーム「submit event」にアタッチします
  3. e.preventDefault()return falseフォームが実際に送信されないようにします
  4. $('.content').load要素に「コンテンツ」クラスを ajax 呼び出しの結果で埋めます
  5. this.actionフォームを送信する URL です。
  6. " +.content"HTMLページ全体ではなく、応答から結果部分のみを抽出するためにここにあります
  7. $(this).serialize()フォーム フィールド データを ajax リクエストに渡します
  8. 最後に、結果が表示された後に最後の匿名関数が呼び出され、結果が更新されたことを示す視覚効果をトリガーするために使用できます
于 2012-10-03T20:16:52.397 に答える