1

いいタイトルが思い浮かびませんでしたが、以下に説明します。

次のような ajax リクエストを作成しています。

...
xmlhttp.send("data1=" + $data);
...

document.getElementById("data1display").innerHTML= xmlhttp.responseText;
...

ページが開発されたので、別の変数 data2 を同じ php ページに送信して処理したいと考えています。

次のようにxmlhttp.sendにデータを追加できることに気付きました"data1=" + $data + "data2=" + $data2

しかし！応答を分割して 2 つの個別の要素を更新するにはどうすればよいですか? (data1display および data2display)。

レスポンスを構築するコード:

if ( isset( $_POST["data1"] ) ) 

 die($object->function()); //returns html to fill the specified element.
4

2 に答える 2

4

PHP 処理ページが html ではなく JSON を返す場合、次のことが予想されます。

{
    "data1display": "<div>whatever</div>",
    "data2display": "<div>something</div>"
}

次に、js の成功のコールバックで、次のようなことができます。

var targetIdArray = ["data1display", "data2display"];
var responseJSON = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < targetIdArray.length; i++) {
    document.getElementById(targetIdArray[i]).innerHTML= responseJSON[targetIdArray[i]];
}

応答で html を使用したい場合は、応答の各部分にクラスまたは ID を追加し、通常の古い jQuery セレクターを使用して応答から正しいノードを取得できます。

最終的には、フロントエンド フレームワークを変更したくなるかもしれません。表示したいデータを返し、クライアントにレンダリングさせる方が良いかもしれません。これは、クライアントに html をまったく返さず、代わりに handlebars などのテンプレート ソリューションを使用することを意味します。

{
    "data1display": "whatever",
    "data2display": "something"
}

次に、次のようないくつかの小さなテンプレートを作成できます。

<div>{{ content }}</div>

それらをクライアントでレンダリングします。

于 2013-06-13T21:39:26.297 に答える