通过成功的 AJAX 响应输出空函数

Question

我在 AJAX 中的功能有问题。我创建了一个对返回 JSON 的 PHP 文件的 AJAX 调用。

对于循环此 JSON，我创建了一个函数，如果 AJAX 成功，我将运行该函数。但实际上数据是空的。

    <script>

    document.getElementById("getproducts").addEventListener("submit", sendAjax);

    function sendAjax(event) {

    var q = document.getElementById('search').value;

        var xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function() {

            if (this.readyState == 4 && this.status == 200) {

                display(this.responseText);

            }

        }

        xhttp.open("POST", "results.php", true);

        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        xhttp.send('search='+q);

        event.preventDefault();

    }

    function display( jsdata ){

        for ( var key in jsdata ){

            var htmltabel = '';

            var datanode = document.createElement("div");

            htmltabel += '<div class="id">' + jsdata[key]['id']    + '</div>';

            content    = htmltabel;

            datanode.innerHTML = content;

            document.getElementById("resultt").appendChild(datanode);

        }

    }

    </script>

如果我像这样在函数中编写 JSON 硬代码，那么一切都很好。

var hardcoded = {"1736":{"id":"1736","post_title":"Test explode","_sku":"12345","_stock":null,"_price":"9.50"}}

//PART OF THE CODE

if (this.readyState == 4 && this.status == 200) {

    display(hardcoded);

}

我该如何解决该函数使用响应的 JSON 的问题？

Answer 1

这是一个更正的脚本，您应该只将 responseData 从转换string为Json Object！document.getElementById("getproducts").addEventListener("submit", sendAjax);&nbsp; &nbsp; function sendAjax(event) {&nbsp; &nbsp; var q = document.getElementById('search').value;&nbsp; &nbsp; &nbsp; &nbsp; var xhttp = new XMLHttpRequest();&nbsp; &nbsp; &nbsp; &nbsp; xhttp.onreadystatechange = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.readyState == 4 && this.status == 200) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display( JSON.parse(this.responseText) ); // You should convert the response from string to a valid JSON&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; xhttp.open("POST", "results.php", true);&nbsp; &nbsp; &nbsp; &nbsp; xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");&nbsp; &nbsp; &nbsp; &nbsp; xhttp.send('search='+q);&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; }&nbsp; &nbsp; function display( jsdata ){&nbsp; &nbsp; &nbsp; &nbsp; for ( var key in jsdata ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var htmltabel = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var datanode = document.createElement("div");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmltabel += '<div class="id">' + jsdata[key]['id']&nbsp; &nbsp; + '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content&nbsp; &nbsp; = htmltabel;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datanode.innerHTML = content;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("resultt").appendChild(datanode);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }