Загружать один и тот же div каждый раз при нажатии кнопки

Я был обеспокоен тем, как загрузить один и тот же div в одну и ту же страницу в течение нескольких дней. Искал ответ в stackru, но еще не нашел.

Упрощенно, это мой код,

<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 только один раз. Я хочу, чтобы он загружался при каждом нажатии кнопки. Как это сделать? Пожалуйста помоги.

Источник

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, которое будет заполнять ваш div каждый раз, когда завершается Ajax-вызов.

Вы использовали XMLHttpRequest с asynchronous опция установлена ​​в false, Это может заблокировать пользовательский опыт, и современные браузеры (например, Firefox) заблокируют это.

если вы хотите добавить больше контента в div, используйте

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

+= добавляет контент к элементу вместо его замены. Это сокращение для:

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

СИДЕНОТЕ: Вы используете POST (в этом случае GET было бы лучше, так как вы получаете только информацию). Если вы хотите отправить данные на сервер, вам нужно поставить querystring (без ? в качестве аргумента в send метод.

Чтобы продолжить это чтение по асинхронному кодированию:

Источник
Другие вопросы по тегам