Question

是否可以使用1 ajax同时更新2个不同的目标DIV？

我要说下面有 index.html ：

<script>
      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("main_body").innerHTML = xmlhttp.responseText;}
                                                 }
      xmlhttp.open("GET","some_page.php",true);
      xmlhttp.send();
</script>

<div id="main_body">
<div id="update_1"></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"></div>
</div>

在上述情况下，我所知道的是 some_page.php 必须如下所示：

<php
     echo "<div id="update_1"><h1>Apple</h1></div>
           <div id="dont_ajax">A big size of html content....</div>
           <div id="update_2"><h1>Orange</h1></div>";
?>

我不希望 some_page.php 加载内容id =＆＃34; dont_ajax＆＃34;由于其庞大的HTML内容。我正在寻找某种解决方案，如：

<script>
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("update_1").innerHTML = xmlhttp.responseText(1);
        document.getElementById("update_2").innerHTML = xmlhttp.responseText(2);}
                                             }
  xmlhttp.open("GET","some_page.php",true);
  xmlhttp.send();
</script>

<div id="main_body">
<div id="update_1"></div>
<div id="dont_ajax">A big size of html content....</div>
<div id="update_2"></div>
</div>

这样some_page.php就可以这么简单：

<php
 echo "<h1>Apple</h1>"; //(become respondtext(1))

 echo "<h1>Orange</h1>"; //(become respondtext(2))
?>

我知道上面的例子不会起作用，我只是想告诉你问题以及我想要实现的目标。请给我一些想法，谢谢。或者，如果你有其他方法来实现这一点，请建议。

我需要原生JS中的解决方案。

Answer 1

是的，这是可能的。您可以更新任意数量的元素。这取决于您准备和解析回复的方式。

这段代码非常糟糕，因为ajax响应只有一个responseText：

<php
 echo "<h1>Apple</h1>"; //(become respondtext(1))
 echo "<h1>Orange</h1>"; //(become respondtext(2))
?>

您将在回复中收到<h1>Apple</h1><h1>Orange</h1>，并且您会生成更多丑陋的代码，试图将其分成几部分。

最好的解决方案是准备JSON字符串：

<php
 echo "{update_1: '<h1>Apple</h1>', update_2: '<h1>Orange</h1>'}";
?>

然后解析响应并更新文档：

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   var data = JSON.parse(xmlhttp.responseText);
   ['update_1', 'update_2'].forEach(function(i){
      document.getElementById(i).innerHTML = data[i];
   });
}

单个ajax请求更新2个不同的<div>

1 个答案: