四十二、jQuery的ajax請求
阿新 • • 發佈：2018-12-16
一、Ajax請求方法
1.js原生ajax方法:
/1.建立XHR物件 (伺服器互動物件) 注意相容 var ajax; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest(); }else{ ajax=new ActiveXObject("Microsoft.XMLHttp"); //IE6,IE5 } //2.使用open方法設定和伺服器互動 ajax.open(method,url,async,username,password); //get post //3.send()設定傳送資料，開始和伺服器端的互動 ajax.send(); //4.註冊事件onreadystatechang ajax.onreadystatechange=function(){ //5.進入成功，判斷狀態碼，更新介面 if(ajax.readyState==4&&ajax.status==200){ console.log(ajax.responseText); } }
2.jquery中ajax:
(1)$.get()方法:使用ajax的HTTP get請求從伺服器載入資料
語法：$.get(URL,data,function(data,status,xhr),dataType) 返回string型
注意：將string轉換為json物件，JSON.parse()或eval()，但eval()並不常用
$.get( "./data/datainfo.txt", function(data){ console.log(data);//string型 //console.log(JSON.parse(data)); //json物件 console.log(eval(data)); //json物件 } );
(2)$.post() 使用Ajax的HTTP post請求 從伺服器載入資料
語法：$(selector).post(URL,data,function(data,status,xhr),dataType) 返回string型
$.post({ url:"./data/datainfo.txt", dataTpye:"JSON", success:function(data){ console.log(data); //string型 console.log(JSON.parse(data)); console.log(eval(data)); } });
(3)$.ajax() 執行非同步Ajax(非同步http)請求
所有的 jQuery AJAX 方法都使用 ajax() 方法。該方法通常用於其他方法不能完成的請求。
語法：$.ajax({name:value, name:value, ... }) 返回json物件
$.ajax({
url:"./data/datainfo.txt",
data:{"name":"lisi"},
type:"post",
dataType:"JSON",
success:function(data){
console.log(data); //json物件
},
error:function(){
console.log("輸出錯誤")
}
})(4)$.getJSON()方法使用ajax的http get請求json資料
語法 $(selector).getJSON(url,data,success(data,status,xhr)) 返回json物件
$.getJSON({
url:"./data/datainfo.txt",
type:"get",
dataType:"JSON",
success:function(data){
console.log(data);
}
})二、遠端呼叫API案例--簡易天氣預報
1.編寫簡單的html頁面並增加樣式
2.利用jquery ajax訪問遠端API資料，並將資料新增到介面內;
利用$.ajax()方法訪問資料；
程式碼：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天氣預報</title>
<style>
*{
margin: 0;
padding: 0;
}
.block{
width: 800px;
height: 450px;
border: 1px solid black;
margin: 10px auto;
background: url("./imgs/4437e6a2ba29129fda7d01.jpg") 0 0 no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
overflow: hidden;
}
.city{
width: 100%;
line-height: 30px;
border-bottom: 1px solid black;
padding: 2px 20px;
font-size: 14px;
}
.city>input{
width: 80px;
outline: none;
padding: 0 4px;
color: silver;
}
#btn{
width: 40px;
padding: 1px;
background-color: white;
font-size: 10px;
border: 1px solid silver;
}
#current{
height: 100px;
line-height: 25px;
border-bottom: 1px solid black;
padding: 10px 20px;
font-size: 14px;
}
.weather_day{
width: 120px;
height:350px;
line-height: 35px;
list-style: none;
border-right: 1px solid black;
display: inline-block;
text-align: center;
padding: 30px 0;
font-size: 13px;
color: #1d1d1d;
}
.high{
color: red;
}
.low{
color: blue;
}
</style>
</head>
<body>
<div class="block">
<div class="city">
請輸入查詢城市：<input type="text" id="cityname" value="" placeholder="西安">
<button id="btn">確定</button>
</div>
<div id="current">
當前城市：<span></span><br>
此刻溫度：<span></span><br>
友情提示：<span></span>
</div>
<div id="weather">
<ul>
<li class="weather_day">
日期：<span></span><br>
風力：<span></span><br>
風向：<span></span><br>
<span>高溫</span><br>
<span>低溫</span><br>
天氣：<span></span>
</li>
<li class="weather_day" style="width: 170px">
日期：<span></span><br>
風力：<span></span><br>
風向：<span></span><br>
<span class="high">高溫</span><br>
<span class="low">低溫</span><br>
天氣：<span></span>
</li>
<li class="weather_day">
日期：<span></span><br>
風力：<span></span><br>
風向：<span></span><br>
<span>高溫</span><br>
<span>低溫</span><br>
天氣：<span></span>
</li>
<li class="weather_day">
日期：<span></span><br>
風力：<span></span><br>
風向：<span></span><br>
<span>高溫</span><br>
<span>低溫</span><br>
天氣：<span></span>
</li>
<li class="weather_day">
日期：<span></span><br>
風力：<span></span><br>
風向：<span></span><br>
<span>高溫</span><br>
<span>低溫</span><br>
天氣：<span></span>
</li>
<li class="weather_day" style="border: none;">
日期：<span></span><br>
風力：<span></span><br>
風向：<span></span><br>
<span>高溫</span><br>
<span>低溫</span><br>
天氣：<span></span>
</li>
</ul>
</div>
</div>
<script src="js/jquery-3.0.0.js"></script>
<script>
$(function(){
ajax("西安");
$("#cityname").bind('blur',function(){
ajax("西安");
}).focus(function(){
$("#cityname").unbind('blur').attr("placeholder","");
$("#btn").click(function(){
var cityname=$("#cityname").val();
ajax(cityname);
});
});
//ajax封裝
function ajax(cityname) {
$.ajax({
url:"https://www.apiopen.top/weatherApi",
type:"post",
dataType:"JSON",
data:{"city":cityname},
success:function(response){
$("#cityname").css({color:"black"}),
console.log(response);
//綁定當前城市溫度
var cur=$("#current").find("span");
cur.eq(0).html(response.data.city);
cur.eq(1).html(response.data.wendu+"<sup>°</sup>C");
cur.eq(2).html(response.data.ganmao);
//繫結日期溫度
for(var i=0;i<6;i++){
var wear=$("#weather").find(".weather_day").eq(i).find("span");//span
if(i>0){
var resp=response.data.forecast[(i-1)]; //資料陣列
//console.log(resp);
wear.eq(0).html(resp.date);
wear.eq(1).html(resp.fengli.split("[")[2].split("]")[0]);
wear.eq(2).html(resp.fengxiang);
wear.eq(3).html(resp.high);
wear.eq(4).html(resp.low);
wear.eq(5).html(resp.type);
}else {
var yes=response.data.yesterday;
wear.eq(0).html(yes.date); wear.eq(1).html(yes.fl.split("[")[2].split("]")[0]);
wear.eq(2).html(yes.fx);
wear.eq(3).html(yes.high);
wear.eq(4).html(yes.low);
wear.eq(5).html(yes.type);
}
}
}
})
}
});
</script>
</body>
</html>