如何拆分AJAX响应，从而不必发出多个请求?

How do you split up an AJAX response so you don't have to make several requests?

本文关键字：不必 请求 何拆分 拆分 响应 AJAX      更新时间：2023-09-26

我想不出更好的标题了，下面是解释:

我正在做一个ajax请求，看起来像这样:

...
xmlhttp.send("data1=" + $data);
...
document.getElementById("data1display").innerHTML= xmlhttp.responseText;
...

现在页面已经开发，我想发送另一个变量，data2到同一个php页面进行处理。

我意识到我可以将数据添加到xmlhttp。发送像"data1=" + $data + "data2=" + $data2

但是!如何分割响应以更新两个单独的元素?(data1display and data2display).

构建响应的代码:

if ( isset( $_POST["data1"] ) ) 
 die($object->function()); //returns html to fill the specified element.

如果你的php处理页面返回的是JSON而不是html，你可以期待以下内容:

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

然后在js的success回调中，你可以这样做:

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传递回客户端，而是使用一些模板解决方案，如车把。

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

，然后你可以做一对小模板，如:

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

你能不能不写if语句，说如果这个请求被设置了，那么执行

. getelementbyid("data1display")。innerHTML = xmlhttp.responseText;

. getelementbyid("data2")。innerHTML = xmlhttp.responseText;

只需在ajax中添加if语句

相关文章：