原生js調用接口數據和JQuery中Ajax的調用接口
原生js：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js調接口</title>
</head>
<body>
<button type="button" id="box" "fns()">點擊</button>
<script>
//第一步 實例化
var xhr =new XMLHttpRequest();
//第二步，準備發送，請求的方式 地址 是否異步=1
xhr.open("post","http://192.10.78.120:8080/api/zbbbz/query?page=1&rows=20&xmbbm=00000046",
true);
xhr.onreadystatechange = fn;//獲到請求的數據之後要做的事情
//第三步，發送請求
function fns() {
xhr.send();
}
//回調函數
function fn() {
if(xhr.readyState==4){
if(xhr.status==200){
//xhr.responseText 請求返回回來的數據
console.log(xhr.responseText)
}
}
}
</script>
</body>
</html>
jquery的ajax：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax調用接口</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<button id="btn">提交</button>
<script>
$(function () {
$("#btn").click(function () {
$.ajax({
url:"http://192.10.78.120:8080/api/zbbbz/query",
type:"post", //請求類型
dataType:'json', //返回 JSON 數據
async : false, //是否支持異步刷新，默認是true（異步）
data:{ //需要提交的數據
page:1,
rows:20,
xmbbm:00000046
},
success:function(data){ //請求成功後的回調函數
console.log(data)
},
error:function () { //請求失敗後的回調函數
alert("服務器內部異常")
}
});
});
})
</script>
</body>
</html>
