通过成功的 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 CODEif (this.readyState == 4 && this.status == 200) {    display(hardcoded);}我该如何解决该函数使用响应的 JSON 的问题？

Answer 1

这是一个更正的脚本，您应该只将 responseData 从转换string为Json Object！

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( JSON.parse(this.responseText) ); // You should convert the response from string to a valid JSON

            }

        }

        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);

        }

    }