ページ上のケアイベントコントローラー

きっとあなたはそのような仕事に直面しました：

-ページにajaxデータをアップロードします。
-オブジェクトをクリックして、サーバーからの応答を受信します。
-結論ajaxの（非）依存リスト。

書かれたコントローラーはこれらの問題を解決します;それはできます：

-指定されたデータをページにアップロードします;
-作成されたオブジェクトのイベントを監視し、新しいオブジェクトをロードします。
-ネストのあるSELECTリストの依存関係を追跡します。

このモンスターのサイズはほんの数行です。

コメントで、もう少し行：

$(document).ready(function() { //    function post_ajax(url, data, inn) { $.ajax({ type: "POST", url: url, data: data, success: function(data) { $(inn).html(data); } }); return; } //  #need_ajax              jQuery.each($("div#need_ajax"), function(i) { post_ajax($(this).data("url"), $(this).data("post"), $(this).data("html")); }); //     ,    ,     //      '.city, .do_ajax $('body').on('click', '.city, .do_ajax', function() { //         ,        $(this).data("inpost"); var my_select = $("option:selected", this).val() ? $("option:selected", this).val() : $(this).data("inpost"); //   ,      ?    ?    $(this).data("clean")  if ($(this).data("clean")) { var to_clean = $(this).data("clean").split(" "); if (to_clean) $.each(to_clean, function(i) { $("#" + this).empty(); }); } //              ?   $(this).data("next")   my_select   $(this).data("url") var to_next = $(this).data("next"); if (to_next && my_select != 0) post_ajax($(this).data("url"), $(this).data("post") + "=" + my_select, "#" + to_next); }); }); 

仕組み

ページに追加します。

 <div id='ob_tel_data' name='ob_tel_data'> <a class='ob_hide do_ajax' href='javascript:void();' data-inpost='".$o[id]."' data-post='ajax_contacts' data-next='ob_tel_data' data-url='/?ajax_contact' >   →</a> </div> 

私たちがいる場所：

data-url = '/？ajax_contact'-リクエストのアドレス
data-post = 'ajax_contacts'-変数名
data-inpost = '"。$ o [id]。"'-変数データ
data-next = 'ob_tel_data'-受信したhtml応答を挿入する場所

その結果、ボタンが表示され、クリックするとリクエストが行われ、指定されたdata-nextでhtmlが更新されます

依存選択を行うにはどうすればよいですか
選択を描画するには、追加するだけです：

 <div id='need_ajax' data-url='/map.php?' data-post='g1=1' data-html='#html_g1'></div> <div name="html_g1" id="html_g1" ></div><div name="html_g2" id="html_g2" ></div><div name="html_g3" id="html_g3"></div> 

ここで-need_ajaxは、data-urlアドレスとdata-postリクエストからデータをロードし、data-html = '＃html_g1'に挿入する必要があることを示します
その後、受信したデータも関数によって再帰的に処理され、データを更新してガベージをクリアできます。

PHPでは、都市選択ハンドラー自体は次のようになります。

 #       $assoc = array( "g1" => array("clean" => "html_g2 html_g3", "next" => "html_g2", "url" => "/map.php?", "post" => "g2"), "g2" => array("clean" => "html_g3", "next" => "html_g3", "url" => "/map.php?", "post" => "g3"), "g3" => array("clean" => "", "next" => "", "url" => "/map.php?", "post" => "g4"), "g4" => array("cookie" => "city[3]") ); #   ? php.net/manual/ru/wrappers.php.php # php://input -   AJAX  $_POST = @file_get_contents("php://input"); #    if ($_POST) { $a = explode("=", $_POST); $r77 = @mysql_query("SELECT * from ajax_city where ". ( $a[0] == "g1" ? " main='1' " : " parentid='".number_format($a[1], 0, '', ''). "'") ." ORDER BY pos DESC , text ASC "); if (@mysql_num_rows($r77) > 0) { #   $select = ' <select name="'.$a[0].'" id="'.$a[0]. '" class="city" data-clean="'.$assoc[$a[0]][clean]. # -       '" data-next="'.$assoc[$a[0]][next]. # -      '" data-url="'.$assoc[$a[0]][url]. # -       '" data-post="'.$assoc[$a[0]][post]. # -      '" > <option value=0>  </option> '; while ($o = @mysql_fetch_array($r77)) { $select. = "<option value='".$o[cityid]."' ".($o[cityid] == $a[1] ? " SELECTED" : "")." >".$o[text]."</option>\n"; } $select. = "</select>"; } echo $select; exit; 

デモ- ボタン （連絡先の詳細を表示→）、 選択 （都市を選択）

なんで？ コントローラーは、任意の数のボタンを提供し、ページ上の選択、依存リストとボタンの更新、入力、クリアを行うことができます。

これは非常に小さいが便利なコードです。
ご清聴ありがとうございました。