js调用HTTP接口

最新推荐文章于 2024-01-04 20:28:29 发布

charlie_wang007

最新推荐文章于 2024-01-04 20:28:29 发布

阅读量1.5w

点赞数 5

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

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

版权

js 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前面已经开发好了web服务，用golang写了两个接口，一个post接收传上来的数据，get获取数据，今天尝试用js调用接口，将获取到的数据显示在web上

<!DOCTYPE html>
<title>GET</title>
<body>
<script type="text/javascript">
function Get(){
    var xmlhttp;
    var Mac,Sn,DeviceId 
    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)
        {
            document.getElementById("demo").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","http://api.puppysmart.com/aiot/v1/device?mac=001A1353C69D",true);
    xmlhttp.send();

}
</script>

<script>
    function myFunction(){
        document.getElementById("demo").innerHTML=Get();
    }
</script>

<button type="button" onclick="myFunction()">点击这里查询设备信息</button>
<p id="demo"></p>

</body>
</html>

总结：

var xhr = new XMLHttpRequest (); new一个http链接

xhr.open(method, url, async, username, password);新建请求

其中 xhr 表示 XMLHttpRequest 对象，open() 方法包含 5 个参数，说明如下：

method：HTTP 请求方法，必须参数，值包括 POST、GET 和 HEAD，大小写不敏感。
url：请求的 URL 字符串，必须参数，大部分浏览器仅支持同源请求。
async：指定请求是否为异步方式，默认为 true。如果为 false，当状态改变时会立即调用 onreadystatechange 属性指定的回调函数。
username：可选参数，如果服务器需要验证，该参数指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
password：可选参数，验证信息中的密码部分，如果用户名为空，则该值将被忽略。

xhr.send(body);传参并发送请求

xhr.setResponseHeader(“Header-name”, “value”);发送header参数

发送请求后，可以使用 XMLHttpRequest 对象的 responseBody、responseStream、responseText 或 responseXML 属等待接收响应数据。

web数据
在这里插入图片描述
数据总算出来了，接下来研究参数化输入及各种控件，美化输出，有问题欢迎指正
本文参考：
http://c.biancheng.net/view/5995.html

改良下代码：

<!DOCTYPE html>
<title>GET</title>
<body>
<script type="text/javascript">
function Get(){
    var xmlhttp;
    var Mac,Sn,DeviceId,Model
    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;
            // var o = eval("(" + info + ")" + "()");  //用eval()把字符串转换为脚本
            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:"+Mac;
            document.getElementById("sn").innerHTML="Sn:"+Sn;
            document.getElementById("model").innerHTML="Model:"+Model;
            document.getElementById("devid").innerHTML="DeviceId:"+DeviceId;


        }
    }
    xmlhttp.open("GET","http://localhost:8080/aiot/v1/device?mac=001A1353C69D",true);
    xmlhttp.send();

}
</script>

<!-- <script>
    function myFunction(){
        document.getElementById("demo").innerHTML=Get();
    }
</script> -->

<button type="button" onclick="Get()">点击这里查询设备信息</button>
<p id="mac"></p>
<p id="sn"></p>
<p id="model"></p>
<p id="devid"></p>


</body>
</html>

调试了下http返回的responseText，console看到的是string，但是我用jsonparse居然marshal成了json，这样就可以输出属性了

在这里插入图片描述

还想把数据放到表格，加油

charlie_wang007

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
3
评论
js调用HTTP接口

前面已经开发好了后端服务，用golang写两个接口，一个post接收传上来的数据，get获取数据，今天尝试用js调用接口，将数据显示在web上<!DOCTYPE html><title>GET</title><body><script type="text/javascript">function Get(){ var xmlhttp; var Mac,Sn,DeviceId if (window.XMLHttp
复制链接

扫一扫

专栏目录