主页 / 问题 / 769278
Accepted
Алексей
Asked:2020-01-11 17:59:07 +0800 CST2020-01-11 17:59:07 +0800 CST

纯javascript中多个对象的AJAX

  • 772

有些元素需要异步接收信息并在单击按钮时显示在单独的块中，但我不知道如何做到这一点。

没有任何库。

以下是我的努力：

<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>
php

1 个回答

  1. Best Answer

    最初，您在布局中有错误；您不能设置相同的两个块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

相关问题