Question

我非常擅长JavaScript，因此需要帮助。我正在尝试根据某些条件组装最终布局。

我的问题：我知道JavaScript完全错误。我正在寻找正确的语法和语句来从多个文件中获取该内容并将它们附加到相应的div。

请注意：我不是在寻找任何jQuery解决方案，因为这是我模板中唯一的JavaScript函数，而且我不想为它加载整个库。

我的index.php文件

<script type="text/javascript">
function loadLayout(){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {xmlhttp=new XMLHttpRequest();}
    else {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {document.getElementById("header").innerHTML=xmlhttp.responseText;}
        {document.getElementById("body").innerHTML=xmlhttp.responseText;}
        {document.getElementById("footer").innerHTML=xmlhttp.responseText;}
      }
var 
x=window.innerWidth||document.documentElement.clientWidth||document.getElementsByTagName.clientWidth;
        if (x <= 800) {
            xmlhttp.open("GET","header1.php",true); // this should append to Div with ID "header"
        } else if (x > 800 && x <=1200) {
            xmlhttp.open("GET","body1.php",true); // this should append to Div with ID "body"
        } else if (x >1200) {
            xmlhttp.open("GET","footer1.php",true);// this should append to Div with ID "footer"
        }
        xmlhttp.send();
    }
    window.onload = loadLayout; // When the page first loads
    window.onresize = loadLayout; // When the browser changes size
    </script>

    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>

我的header.php文件

if ($xyz == '20' && $xyz <= '60'){ 
    require_once 'some-1.php';
}

我的body.php文件

if ($xyz == '20' && $xyz <= '60'){ 
    require_once 'some-2.php';
}

我的footer.php文件

if ($xyz == '20' && $xyz <= '60'){ 
    require_once 'some-3.php';
}

Answer 1

以下代码（完全注释）可以帮助您：

/* we put all your code inside an IIFE, so we don't pollute the global scope */
(function() {
  /* our AJAX helper function */
  function ajax(url, callback, method) {
    if (!method) method = 'GET';

    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.addEventListener('load', function() {
      callback.call(xhr, xhr.responseText);
    });
    xhr.send();
  }

  /* we create a variable to store our current layout
    (so, we only make the AJAX request if the layout has changed) */
  var lastLayout = [];

  function loadLayout() {
    /* we get the current width (didn't change your code) */
    var width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName.clientWidth;
    /* and then, we use check what layout we must load */
    var layout = width <= 800 ? ['body'] : width <= 1200 ? ['header', 'body'] : ['header', 'body', 'footer'];

    /* if the new layout is different from the last loaded */
    if (lastLayout.toString() !== layout.toString()) {
      /* firstly, we set our current loaded to the new one */
      lastLayout = layout;

      /* we empty all the divs */
      document.getElementById('header').innerHTML = '';
      document.getElementById('body').innerHTML = '';
      document.getElementById('footer').innerHTML = '';

      /* loop through the layout divs that should be loaded */
      layout.forEach(function(str) {
        /* we use the variable to dinamically open the correct PHP file */
        ajax(str + '1.php', function(result) {
          /* and then, we use the variable again to fill the correct div */
          document.getElementById(str).innerHTML = result;
        });
      });
    }
  }  

  window.onload = window.onresize = loadLayout;
})();

简单的JavaScript / Ajax从多个外部文件中获取内容并将它们附加到相应的div

1 个答案: