js发送http post请求

最新推荐文章于 2024-06-13 08:49:48 发布

charlie_wang007

最新推荐文章于 2024-06-13 08:49:48 发布

阅读量8.8k

点赞数 3

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_41479678/article/details/112716019

版权

js 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

之前写了get请求，想来post请求页应该很简单，send发送body参数，method换成post即可，写完代码发现根本没有请求，打log页没有任何信息，找了很多资料，没有解决，然后逐句加log查看，终于找到问题，response.status始终是0，我一直监听的是200，改完后可以获取到响应体，
代码：

<!DOCTYPE html>
<html>
<head> 
    <link rel="stylesheet" type="text/css" href="tb.css">

    <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
    </script>
    <script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
    <meta charset="utf-8"> 

    <h1 align="center" class="biaoti" height="60" >AIoT入库设备信息</h1>
    <h2 id="datetime" class="datatime"></h2> 
    <script>
        setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
    </script>
</head>

<body>
    <!-- 查询 -->
    <div id = "search" class="h2"> <p>查询 <p></div>
        &nbsp;&nbsp;请选择查询：&nbsp;<select id="info" class="ivu-select" style="width:200px;height: 30px; ">
            <option value="mac"  SELECTED>Mac</option>
            <option value="sn">Sn</option>
            <option value="device_id"&nbsp;&nbsp;>DeviceId</option>

    </select>  
    &nbsp;&nbsp;&nbsp;请输入：&nbsp;<input id="data" type="search"  style="width:200px;height: 30px;"/>&nbsp;&nbsp;
    <input type="submit" value="查询" style="background-color: #108ee9;width: 100px;height: 30px;color: #FFFFFF;border:none;border-radius: 5px  " onclick="get()"/>&nbsp;&nbsp;
    <input type="reset" value="重置"  style="background-color: #108ee9;width: 100px;height: 30px;color: #FFFFFF;border:none;border-radius: 5px  " onclick="location.reload()"/>
    <br>
    <br>
    <table width="44.5%"   align="left">
            <thead>

            </thead>
        
            <tbody>
        
            </tbody>
        </table>
    </div>
    <script>
        var Mac,Sn,DeviceId,Model;
        var table=document.querySelector("table");

        function get(){
            //获取 输入框的值
            var type=document.getElementById("info").value;
            var mydata=document.getElementById("data").value;

            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var info = xmlhttp.responseText;
                    temp =JSON.parse(info);
                    console.log(temp); 
                    console.log(typeof temp);
                    console.log(temp.data.Mac); 
                    console.log(temp.data.Sn); 
                    console.log(temp.data.Model); 
                    console.log(temp.data.Device_id); 
                    Mac=temp.data.Mac;
                    Sn=temp.data.Sn;
                    Model=temp.data.Model;
                    DeviceId=temp.data.Device_id;
                    // document.getElementById("mac").innerHTML="Mac: &nbsp;"+Mac;
                    // document.getElementById("sn").innerHTML="Sn: &nbsp;"+Sn;
                    // document.getElementById("model").innerHTML="Model: &nbsp;"+Model;
                    // document.getElementById("devid").innerHTML="DeviceId: &nbsp;"+DeviceId;
                    var heads=["Mac","Sn","Model","DeviceId"]

                    var datas=[Mac,Sn,Model,DeviceId]
                    console.log(datas); 
                    var thead=document.querySelector("thead");
                    table.style.borderCollapse="collapse"; 
                    table.style.height="30px"
                    var tr=document.createElement("tr");
                    thead.appendChild(tr);

                    for(var i=0;i<heads.length;i++)  //外面的for循环 是 行tr
                    {
                        var th=document.createElement("th");  //创建单元格
                        tr.appendChild(th);
                        th.innerHTML=heads[i]; //把对象里面的属性值 datas[i][k]给td
                        th.class="biaoti"
                        th.style.border="1px solid gray";
                        th.style.height="30px"
                    }
                    var tbody=document.querySelector("tbody");
                    var tr=document.createElement("tr");
                    tbody.appendChild(tr);
                    for(var i=0;i<datas.length;i++)  //外面的for循环 是 行tr
                    {
                        var td=document.createElement("td");  //创建单元格
                        tr.appendChild(td);
                        td.style.border="1px solid gray";
                        td.innerHTML=datas[i]; //把对象里面的属性值 datas[i][k]给td
                        td.class="tabtxt2"
                        td.style.height="30px"


                    }
                }
            }
            xmlhttp.open("GET","http://localhost:8080/aiot/v1/device?"+type+"="+mydata,true);
            xmlhttp.send();
            
        }

    </script>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <!-- 入库 -->
    <div id = "inputDEVICE" class="h2"> <p>入库 <p></div>

    &nbsp;&nbsp;型&nbsp;号&nbsp;&nbsp;：&nbsp;<select id="inmodel" class="ivu-select" style="width:200px;height: 30px; ">
            <option value="PAIPMSVT01"  SELECTED>PAIPMSVT01</option>
            <option value="PP23TQA">PP23TQA</option>
            <option value="PP23TQB"&nbsp;&nbsp;>PP23TQB</option>
            <option value="HP23ATQC"&nbsp;&nbsp;>HP23ATQC</option>

    </select>
    <br><br>
    &nbsp;&nbsp;&nbsp;MAC：&nbsp;<input id="inmac" type="search" style="width:200px;height: 30px;"/>&nbsp;&nbsp;<br><br>
    &nbsp;&nbsp;&nbsp;S&nbsp;N&nbsp;&nbsp;：&nbsp;&nbsp;<input id="insn" type="search" style="width:200px;height: 30px;"/>&nbsp;&nbsp;<br><br>
    &nbsp;&nbsp;&nbsp;DEVICE_ID：&nbsp;<input id="inid" type="search"  style="width:200px;height: 30px;"/>&nbsp;&nbsp;<br><br>

    <input type="submit" value="提交" 
    style="background-color: #108ee9;text-align:center;width: 100px;height: 30px;color: #FFFFFF;border:none;border-radius: 5px" 
    onclick="myPost()"/>


    <script>
        function myPost(){
            //获取 输入框的值
            var inmodel=document.getElementById("inmodel").value;
            var inmac=document.getElementById("inmac").value;
            var insn=document.getElementById("insn").value;
            var inid=document.getElementById("inid").value;       
            var inputform = "mac="+inmac+"&"+"sn="+insn+"&"+"model="+inmodel+"&"+"device_id="+inid;

            var httppost;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                httppost=new XMLHttpRequest();

            }else{
                // IE6, IE5 浏览器执行代码
                httppost=new ActiveXObject("Microsoft.XMLHTTP");
            }                
            httppost.open("POST","http://localhost:8080/aiot/v1/device",true);

            httppost.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");  //设置请求头信息
            httppost.onreadystatechange = function () {  //绑定响应状态事件监听函数
                if (httppost.readyState == 4) {  //监听readyState状态
                    if (httppost.status == 200 || httppost.status == 0) {  //监听HTTP状态码
                        console.log(httppost.responseText);  //接收数据
                        var info = httppost.responseText;
                        temp =JSON.parse(info);
                        if (temp.code==10000){
                            window.alert("入库成功")
                            window.location.reload();
                            
                        }
                    }
                    console.log(httppost.status);  

                    if (httppost.status >= 300) {
                        var info = httppost.responseText;
                        temp =JSON.parse(info);
                        window.alert("入库失败，"+temp.msg)
                        window.location.reload();
                           
                    }
                }
            }
            httppost.send(inputform);
        }
    </script>

    <div>&nbsp;&nbsp;&nbsp;&nbsp;
        <span id="ok"></span>
    </div>

</body>
</html>

效果图：
在这里插入图片描述
提交之后弹出alert

点击确定后页面刷新

改了一下查询结果展示，点击查询后展示表格，视觉上更和谐美观：
在这里插入图片描述

上面因为我监听有问题，一直没有收到response，查到别的大佬总结的异步的响应状态，分享下

异步响应状态
在 JavaScript 中，使用 readyState 属性可以实时跟踪异步响应状态。当该属性值发生变化时，会触发 readystatechange 事件，调用绑定的回调函数。readyState 属性值说明如表所示。

readyState属性值
返回值说明
0 未初始化。表示对象已经建立，但是尚未初始化，尚未调用 open() 方法
1 初始化。表示对象已经建立，尚未调用 send() 方法
2 发送数据。表示 send() 方法已经调用，但是当前的状态及 HTTP 头未知
3 数据传送中。已经接收部分数据，因为响应及 HTTP 头不安全，这时通过 responseBody 和 responseText 获取部分数据会出现错误
4 完成。数据接收完毕，此时可以通过 responseBody 和 responseText 获取完整的响应数据如果 readyState 属性值为 4，则说明响应完毕，那么就可以安全的读取响应的数据。

考虑到各种特殊情况，更安全的方法是同时监测 HTTP 状态码，只有当 HTTP 状态码为 200 时，才说明 HTTP 响应顺利完成。

链接：http://c.biancheng.net/view/5995.html

charlie_wang007

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
js发送http post请求

之前写了get请求，想来post请求页应该很简单，send发送body参数，method换成post即可，写完代码发现根本没有请求，打log页没有任何信息，找了很多资料，没有解决，然后逐句加log查看，终于找到问题，response.status始终是0，我一直监听的是200，改完后可以获取到响应体，代码：<!DOCTYPE html><html><head> <link rel="stylesheet" type="text/css" href=
复制链接

扫一扫