如何使用 ajax 和 javascript 发布 json 并取回 json 响应？答案

【问题标题】：How to post json and get back an json response using ajax with javascript?如何使用 ajax 和 javascript 发布 json 并取回 json 响应？
【发布时间】：2018-05-01 13:18:47
【问题描述】：

<script>
 window.onload = function() {
 document.getElementById("Save").onclick = function fun() {
 var x = document.forms["myForm"]["machine_id": "TNTEST004"].value;
 var y = document.forms["myForm"]["wifi_mac_address": "80:56:f2:18:12:11"].value;
 var Url = "http://192.168.1.9:8080/machine_reg/";
 var xhr = new XMLHttpRequest();

 xhr.open('POST', Url, true);
 xhr.send(x);
 xhr.send(y);

 xhr.onreadystatechange = processRequest;
 function processRequest(e) {
 if (xhr.readyState == 4 && xhr.status == 200) {
 alert(xhr.responseText.headers.Host);
 
 var response1 = JSON.parse(xhr.responseText);
 document.getElementById("updated_time").innerHTML = response1.updated_time;
 document.getElementById("id").innerHTML = response1.id;
 }
 }
 }
 }
</script>
</head>

<!DOCTYPE html>
<html>

<head>

<body>
<center>
 Javascript Post Request Test
<br><br> 
 
<form name="myForm">
 <input type="text" placeholder= "machine id" name="machine_id"/>
 <input type="text" placeholder= "wifi mac address" name="wifi_mac_address"/>
 <input type="button" id="Save" onclick="function fun()" value="get_values"/>
</form>
 
<br><br> 
 
<table>
 <tr><td>id :</td><td id="id"></td></tr>
 <tr><td>updated_time :</td><td id="updated_time"></td></tr>
</table>

</center>
</body>
</html>

http://192.168.1.9:8080/machine_reg/ 这是我的网址。它是一个 POST 方法。现在在这个 URL 中，如果我 POST ("machine_id": "TNTEST004","wifi_mac_address":"80:56:f2:18:12:11") 这两个 JSON 数据，它将生成一个 ID（例如："id : 3")。我必须使用提交按钮在文本框中传递这两个 json 数据，然后单击按钮，我应该在警报窗口中返回 id。我有点困惑得到一个错误。在 javascript 中使用 ajax 为我解决这个问题。

我会这样过去的。

{ "machine_id": "TNTEST009", "wifi_mac_address": "80:56:f2:18:12:11" }

这是我通过机器ID和wifi mac地址生成的ID。

{ "id": 5, "machine_id": "TNTEST009", "wifi_mac_address": "80:56:f2:18:12:11", "auth_token": "", "updated_time": "2018-05-01T13:14:42.372174Z" }

注意：（如果您想了解它在发布请求上的实际工作原理，请使用 Advanced Rest Client 应用程序作为参考。）

【问题讨论】：

错误是什么？
您好，您能给我们提供更多信息以帮助我们回答吗？具体来说，您能否分享进行 AJAX 调用的代码、AJAX 调用的服务器端脚本以及您看到的错误？
请添加代码。你需要我们写代码吗？请添加您尝试过的代码。

标签： javascript json ajax

【解决方案1】：

我不确定我是否理解您的问题...但这就是您使用 jquery 执行 ajax 请求的方式。

        $.ajax({
        url: '/User/PrevalidateLevelThree',
        type: 'POST',
        data: {
            machine_id: 'TNTEST009',

            wifi_mac_address: '80:56:f2:18:12:11'
        },
        success: function (result) {
            alert(result);
        },
    });

再次，我不确定我是否理解您的问题，但我认为这会给您一个良好的开端...

【讨论】：

好的，这看起来不错。但是如果我发布这个 json 值，那么生成的 ID 必须在警报窗口中返回。你能帮我吗？
我认为您应该在回答中指出该解决方案依赖于 jquery。不是每个人都想使用 jquery，没有它也可以做 Ajax 请求