Выход функции пустой при успешном AJAX ответе

Question

Проблема с моей функцией в AJAX. Я создаю вызов AJAX для файла PHP, который возвращает JSON.

Для l oop this 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);
    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);
        }
    }