Question

我有一个基础文档，我在其中使用ajax更改标记的内容。我对javascript一无所知。我主要是从w3schools example复制我的javascript，因为它完全符合我的要求。

<div class="panel-group" id="accordion">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title p-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" onclick="loadDoc()"><b>1.1</b> Kräfte und Momente in der Ebene</a>
                </h3>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">

                <center>
                <div id="f11">    
                A
                </div>   
                </center> 


            </div>
        </div>


        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title p-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" onclick="loadDoc()"><b>1.2</b> Irgendwas anderes</a>
                </h3>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">

                <center>
                <div id="f12">    
                A
                </div>   
                </center> 


            </div>
        </div>
    </div>

在代码中，我正在替换div标签的内容id =＆＃34; 11＆＃34;和id =＆＃34; 12＆＃34;使用来自外部.php文件的carusel。使用以下脚本。

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("f11").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "car/c1.1.php", true);
  xhttp.send();
}
</script>

当只有一个脚本时，它可以工作，但是当添加第二个脚本时，我仅将f11更改为f12，将car / c1.1.php更改为car / c1.2.php ，只有其中一个有效。我怎样才能让它发挥作用，这样无论我展开哪一部分，它都会将.php部分加载到网站中？

跟进：在最后一页上将有大约23个可展开的部分，按当前状态，这些部分都需要一个独特的脚本。这会起作用吗？

如果有不同的解决方案将特定标记加载到页面中，展开时我会很高兴找到它！

提前致谢！

Answer 1

我会通过传入参数来使函数可重用：

＆＃13;

function loadDoc(target, endpoint) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(target).innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", endpoint, true);
  xhttp.send();
}

＆＃13;

<div class="panel-group" id="accordion">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title p-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" onclick="loadDoc('f11','https://httpbin.org/get?f11=true')"><b>1.1</b> Kräfte und Momente in der Ebene</a>
                </h3>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div class="panel-body">

                <center>
                <div id="f11">    
                A
                </div>   
                </center> 


            </div>
        </div>


        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title p-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" onclick="loadDoc('f12','https://httpbin.org/get?f12=true')"><b>1.2</b> Irgendwas anderes</a>
                </h3>
            </div>
            <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">

                <center>
                <div id="f12">    
                A
                </div>   
                </center> 


            </div>
        </div>
    </div>

＆＃13;

Ajax多个脚本，只有一个工作

1 个答案: