如何使用带有javascript的ajax发布json并获取json响应?

时间:2018-05-01 13:18:48

标签: javascript json ajax



<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>
&#13;
<!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>
&#13;
&#13;
&#13;

http://192.168.1.9:8080/machine_reg/这是我的网址。它是一个POST方法。现在在这个URL中,如果我发布(&#34; machine_id&#34;:&#34; TNTEST004&#34;,&#34; wifi_mac_address&#34;:&#34; 80:56:f2:18:12: 11&#34;)这两个JSON数据,它将生成一个ID(例如:&#34; id:3&#34;)。我必须使用提交按钮在文本框中传递这两个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应用程序进行参考。)

1 个答案:

答案 0 :(得分:0)

我不确定我理解你的问题......但这就是你用jq​​uery做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);
        },
    });

同样,我不确定我理解你的问题,但我认为这会给你一个良好的开端......