时间戳

首页 > 解决方案 > 如何使用 ajax 和 javascript 发布 json 并取回 json 响应？

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

问题描述

<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 应用程序作为参考。）

标签： javascriptjsonajax

解决方案

我不确定我是否理解您的问题...但这就是您使用 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);
        },
    });

同样，我不确定我是否理解你的问题，但我认为这会给你一个好的开始......

推荐阅读