3

私のウェブサイトには、「カタログを参照」ボタンがあり、onclick でページのいくつかの要素が変更され、カタログ要素が表示されます。ナビゲーション バーやニュース フィードなどのいくつかの要素は変更されないため、ページ全体をリロードする必要はありません。

私の質問は、ajax onclick でいくつかの異なる div を変更するにはどうすればよいですか?

基本的に、ページ全体の異なる div にいくつかの異なるコンポーネントを配置する方法がわかりません。

そして、同時ajax呼び出しには制限があることを知っているので、それを行う適切な方法は、divごとに一意のajax呼び出しを行うことではないと確信しています。

少しのガイダンスは素晴らしいでしょう。

4

4 に答える 4

2

jQuery を使用すると、更新が必要な各ブロックの要素の json 配列を取得できます。

あなたのHTMLページで：

$.get("page.php?id=42",
   function(result){
     $('#title').text(result['title']);
     $('#description').text(result['description']);
     $('#price').text(result['price']);
   }, "json");

page.php で:

$result = array('title' => 'foo', 'description' => 'bar', 'price' => 3);
echo json_encode($result);
header('Content-Type: application/json');
die();
于 2012-11-30T00:30:08.793 に答える
0

実際には、ページ上で 10 個以上の要素が (それぞれが個別の ajax によって) 並行して更新されても、それほど大きな違いはありません (実稼働環境にデプロイされた Web サイトでテストして、私が間違っていることを証明できない限り)。

それにもかかわらず、すべてのデータ交換を 1 つの要求/応答 ajax 呼び出しに圧縮したい場合は、非常に可能ですが、サーバー側にある程度の柔軟性が必要です ( http://php.net/manual/en/function. json-encode.php )。つまり、可能な解決策の 1 つは、サーバー側で json 応答を生成することです。これは、キーと値のペア (JSON - javascript {} オブジェクト) を生成し、キーは要素の ID であり、値は (新しい) html です。

jQuery、prototype、dojo など、多数の ajax JS フレームワークがあります (ここでは jQuery を選択します)。

Ajax リクエスト

$.ajax({
...
})

http://api.jquery.com/jQuery.ajax/を参照してください。

サーバーの応答

// Assume we got
// var data = {key1:'html1',key2: 'html2'};

// Ajax handle can look like
success(data) {
    $.each(data, function(key, val){
        //console.log(key, val);
        // Do some checks here.. But key should indicate #id of html elements
        $(key).empty().append(html);
    });
}

これは基本的な概要ですが、正しい方向に進み続ける必要があります。

于 2012-11-30T00:51:00.940 に答える
0

あなたはjsonを使うことができます

例

PHP リクエスト ajax

$div1="<table><tr><td>x</td></tr></table>";
$div2="<table><tr><td>x</td></tr></table>";
$div3="<table><tr><td>x</td></tr></table>";

$json = '{"div1":"'.$div1.'","div2":"'.$div2.'","div3":"'.$div3.'"}';

return $json;

jqueryを使用

$.ajax({url: 'ajax/test.php',
     success: function(data) {

      var obj = JSON.parse(data);

       $("mydiv1").html(obj.div1);
       $("mydiv2").html(obj.div2);
       $("mydiv3").html(obj.div3);

 }});

parce 関数にエラーがある場合は、スペースを置き換えます

例

    $arr =array("\n","\t");
    $div1= str_replace($arr,"",$div1);
于 2012-11-30T00:45:26.163 に答える
0

複数の ajax リクエストを送信することが正しい判断かどうかはわかりません。一意の属性値を持つリクエストを作成するだけで、サーバーが必要なブロックを認識できるようになります。サーバー側では、必要なすべてのブロックが json オブジェクトに連結され、クライアントに返されます。あるべきブロックでオブジェクトを解析した後。例えば

$.ajax({
  url : 'http://your.server.doment',
  data : 'block[]=1&block[]=7&block[]=15',
  type : 'post',
  dataType : 'json',
  success : function (object){
    for( el in object) { $('#block_'+el).html(object[el]); }
  }
});
于 2012-11-30T00:40:19.843 に答える