Question

我一直困扰着如何将相同的div加载到同一页面好几天。一直在寻找stackoverflow中的答案但尚未找到答案。

简化，这是我目前的代码，

<script>
    function add_fields() {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("POST", "add_more.php", false);
        xmlhttp.send();

        document.getElementById("add_more1").innerHTML = xmlhttp.responseText;
    }
</script>

<html>
    <body>
        <input type="button" onclick="add_fields()" value="ADD"/>

        <div id="add_more1"></div>
    </body>
</html>

问题是当我点击按钮时，它只会加载add_more.php一次。我希望每次单击按钮时加载它。怎么做？请帮忙。

Answer 1

function add_fields() {
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //really no need for this anymore these days.
  }

xmlhttp.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200) //success
    {
        document.getElementById("add_more1").innerHTML=this.responseText;   
    }
}

  xmlhttp.open("POST","add_more.php",true); //set the sync to true, modern browsers will block a synchronous request.
  xmlhttp.send();



}

此更新版本包含一个readystate事件，每次Ajax调用完成时，该事件将填充div。

您使用的XMLHttpRequest asynchronous选项设置为false。这可能会阻止用户体验，现代浏览器（如Firefox）会阻止这种情况。

如果您想为div添加更多内容，请使用

document.getElementById("add_more1").innerHTML += this.responseText;

+=向元素添加内容而不是替换它。它是：

的简写

 document.getElementById("add_more1").innerHTML = document.getElementById("add_more1").innerHTML + this.responseText;

SIDENOTE：您使用的是POST（在这种情况下，GET会更好，因为您只需要检索信息）。如果要将发布数据发送到服务器，则需要将querystring（不带?）作为send方法中的参数。

继续阅读异步编码：

Easy to understand definition of "asynchronous event"?（非常简单的解释）。
How does Asynchronous Javascript Execution happen? and when not to use return statement?（更全面）。

每次单击按钮时加载相同的div

1 个答案: