3

Есть элементы, по которым необходимо асинхронно получать информацию и выводить в отдельный блок при нажатии на кнопку, но я понять не могу, как сделать это.

Без каких-либо библиотек.

Ниже мои потуги:

<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            document.getElementById('ajax').innerHTML = xhr.responseText;
        }
    };
</script>
<ul>
    <script>
        xhr.open('GET','function_snmp.php?id=1')
        function sendAJAX() {
            xhr.send();
        }
    </script>
    <li>город Екатеринбург, улица Сельская, дом 6</li>
    <button onclick="sendAJAX()" class="button">Подробнее</button>
    <div id="ajax"></div>
</ul>
<ul>
    <script>
        xhr.open('GET','function_snmp.php?id=2')
        function sendAJAX() {
            xhr.send();
        }
    </script>
    <li>город Москва, улица Московская, дом 5</li>
    <button onclick="sendAJAX()" class="button">Подробнее</button>
    <div id="ajax"></div>
</ul>
2
  • jQuery есть возможность использовать? 11 янв 2018 в 10:29
  • @Klimenkomud, нет. 11 янв 2018 в 10:50

1 ответ 1

1

У вас изначально ошибка в верстке нельзя двум блокам задавать одинаковый id можно сделать так:

<script>
    function sendAJAX(idDOM, id){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'function_snmp.php?id='+id, true)
        var DOM = document.getElementById(idDOM);
        DOM.innerHTML = xhr.responseText
    }
</script>
<ul>
    <li>город Екатеринбург, улица Сельская, дом 6</li>
    <button onclick="sendAJAX('ajax1', 1)" class="button">Подробнее</button>
    <div id="ajax1"></div>
    </ul>
<ul>
    <li>город Москва, улица Московская, дом 5</li>
    <button onclick="sendAJAX('ajax2', 2)" class="button">Подробнее</button>
    <div id="ajax2"></div>
</ul>

на странице "function_snmp.php" сформируйте нужный html

1
  • Пришлось немного модифицировать скрипт, но в общем, он работает как положено. <!-- language: lang-js --> var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { document.getElementById('ajax').innerHTML = xhr.responseText; } }; xhr.open('GET', 'function_snmp.php?id=36'); function sendAJAX() { xhr.send( ); } 25 янв 2018 в 7:02

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.