Question

嘿伙计我正在使用的executePostHttpRequest函数看起来与下面发布的代码完全相同。目前，当我运行该功能时，我得到了具有相应数据的服务器响应，但我不确定如何使用响应数据？如何将其存储到变量中以便使用？

Javascript executePostHttpRequest

function executePostHttpRequest(url, toSend, async) {
    console.log("====== POST request content ======");
    console.log(toSend);

    var xmlhttp = new XMLHttpRequest(); // new HttpRequest instance
    xmlhttp.open("POST", url, async);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xmlhttp.setRequestHeader("Content-length", toSend.length);
    xmlhttp.send(toSend);

    console.log("====== Sent POST request ======");
}

以下是我正在执行的操作。使用Javascript

var searchCriteria = JSON.stringify({
    displayName : search_term
    });

    console.log("Search: "+searchCriteria) //Search: {"name":"John, Doe"} 

    var response = executePostHttpRequest("/web/search", searchCriteria, true);
    console.log(response) //undefined

所以目前响应的console.log显示为undefined。但是，如果我查看Chrome开发工具上的网络选项卡并查看/ web / search调用，我会看到一个返回的JSON字符串，看起来像这样。

[{"id":"1","email":"john.doe@dm.com","name":"John, Doe"}]

我希望能够通过这样的方式将此响应中的数据显示到HTML页面。

$("#id").html(response.id);
$("#name").html(response.name);
$("#email").html(response.email);

我尝试采用另一种方式并使用Jquery POST代替这样做。

var searchCriteria = JSON.stringify({
    displayName : search_term
    });

    console.log("Search: "+searchCriteria) //Search: {"name":"John, Doe"} 

    $.post("/web/search", {
        sendValue : searchCriteria
    }, function(data) {
            $.each(data, function(i, d) {
                  console.log(d.name);
        });
            }, 'json').error(function() {
                  alert("There was an error searching users! Please contact administrator.");
        });

但由于某种原因，当这次运行时，我收到“有一个错误”而没有来自服务器的响应。

有人可以帮助我吗？感谢您抽出宝贵时间阅读它。

Answer 1

您的executePostHttpRequest功能对其接收的数据没有任何作用。您必须向XMLHttpRequest添加一个事件监听器才能获得它：

function getPostData(url, toSend, async, method) {

    // Create new request
    var xhr = new XMLHttpRequest()

    // Set parameters
    xhr.open('POST', url, async)

    // Add event listener
    xhr.onreadystatechange = function () {

        // Check if finished
        if (xhr.readyState == 4 && xhr.status == 200) {

            // Do something with data
            method(xhr.responseText);

        }
    }
}

我已添加method参数，您可以将函数添加为参数。

以下是您尝试做的一个示例：

function displayStuff(jsonString) {

    // Parse JSON string
    var data = JSON.parse(jsonString)

    // Loop over data
    for (var i = 0; i < data.length; i++) {

        // Get element
        var element = data[i]

        // Do something with its attributes
        console.log(element.id)
        console.log(element.name)
    }

}

getPostData('/web/search', searchCriteria, true, displayStuff)

将服务器响应数据设置为要使用的变量

1 个答案: