前言

有時候，我們希望點擊頁面上的某個按鈕后，不刷新整個頁面，給后臺發送一個請求過去，請求到數據后填充到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這句：

html>


????
????天氣



?????

獲取天氣，返回json數據

點我！，獲取json數據

當點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])

html>


????
????天氣






?????

獲取天氣，返回json數據

點我！，獲取json數據

加上jQuery腳本后，點button會發一個get請求，可以使用抓包工具看得到

Ajax方式

下面這種寫法看起來更加直觀，更加規范一點

$("#weather").click(function()?{
????????var?username?=?$(this).val();
????????$.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);?
????????}
????})

總結

以上是生活随笔為你收集整理的ajax get请求_python测试开发django50.jquery发送Ajax请求(get)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。