前面已经开发好了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,这样就可以输出属性了
还想把数据放到表格,加油