前言
有時候，我們希望點擊頁面上的某個按鈕后，不刷新整個頁面，給后台發送一個請求過去，請求到數據后填充到html上，這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。Ajax可以完美的實現。
jQery和Ajax
jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地為網站提供AJAX交互。
特點： jQuery是當前很流行的一個JavaScript框架，使用類似於CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴展性，擁有不少插件。
描述：
- 對於程序員來說，簡化javascript和ajax編程，能夠使程序員從設計和書寫繁雜的JS應用中解脫出來，將關注點轉向功能需求而非實現細節上，從而提高項目的開發速度。
- 對於用戶來說，改善了頁面的視覺效果，增強了與頁面的交互性，體驗更絢麗的網頁物資。
- javaScript框架實際上是一系列工具和函數。
AJAX = 異步 JavaScript 和 XML。AJAX 是一種用於創建快速動態網頁的技術。
通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
案例實踐
需實現的效果：當點擊頁面上某個元素時，發送一個get請求，服務端返回json數據，從返回的json數據里面提出我想要的數據，然后alter彈窗顯示出來
網頁中添加jquery有兩種方式，一種是從 jquery.com下載 jQuery 庫，放到本地項目中，另外一種從 CDN 中載入 jQuery, 如從 Google 中加載 jQuery
我這里是從CDN中載入，里面加上這句：<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天氣</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div style="margin: 15% 40%;">
<p>獲取天氣，返回json數據</p>
<button id="weather">點我！，獲取json數據</button>
</div>
</body>
</html>
當點button按鈕時，訪問的接口相關內容如下（需提前准備好接口數據，可以在django里面寫個接口返回）：
接口訪問url： weather_code/
請求方式：get
請求參數：city=上海&time=2019-04-05
返回數據(json)：{"error_code": 1, "reason": "success", "weather_code": 1, "weather_name": "晴天", "city": "上海"}
在django里面寫個訪問頁面地址:http://localhost:8000/weather_web/,打開谷歌瀏覽器Console調試
$("#weather").click(function(){
$.get("/weather_code/",
{
city:"上海",
time:"2019-04-05"
},
function(result){
alert("返回數據: \n" + "reason:"+ result.reason +"\n"+"weather_name:"+ result.weather_name);
});
});
點完按鈕之后，彈出alert，返回的是json數據，json里面取出key對應的值,如：result.key名稱
jQuery腳本
把jQuery腳本整合到html內容中，語法格式：$.get(url,[data],[success])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天氣</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#weather").click(function () {
$.get("/weather_code/",
{
city: "上海",
time: "2019-04-05"
},
function (result) {
alert("返回數據: \n" + "reason:" + result.reason + "\n" + "weather_name:" + result.weather_name);
});
});
})
</script>
</head>
<body>
<div style="margin: 15% 40%;">
<p>獲取天氣，返回json數據</p>
<button id="weather">點我！，獲取json數據</button>
</div>
</body>
</html>
加上jQuery腳本后，點button會發一個get請求，可以使用抓包工具看得到
Ajax方式
下面這種寫法看起來更加直觀，更加規范一點
$("#weather").click(function() {
$.ajax({
"url" : "/weather_code/", //提交URL
"type" : "Get",//處理方式
"data" : {
"city": "上海",
"time": "2019-04-05"
},//提交的數據
"dataType" : "json",//指定返回的數據格式
"success" : callback,//執行成功后的回調函數
"async" : "false",//是否同步
//錯誤后執行
"error" : function() {
alert("請求失敗！")
}
});
function callback(result) {
alert("返回數據111: \n" + "reason:" + result.reason + "\n" + "weather_name:" + result.weather_name);
}
})