搜尋
首頁web前端js教程實例講解jQuery與JS實作AJAX

實例講解jQuery與JS實作AJAX

Dec 08, 2020 pm 05:38 PM
ajaxjquery

AJAX教學欄位實例介紹jQuery與JS實作AJAX的方法

實例講解jQuery與JS實作AJAX

相關免費學習推薦:ajax教學(影片)

#AJAX準備知識:JSON

什麼是JSON ?

JSON 指的是JavaScript 物件表示法(JavaScript Object Notation)

JSON 是輕量級的文字資料交換格式

JSON 獨立於語言*

JSON 具有自我描述性,更容易理解

* JSON 使用JavaScript 語法來描述資料對象,但是JSON 仍然獨立於語言和平台。 JSON 解析器和 JSON 函式庫支援許多不同的程式語言。

合格的json物件:

["one","two","three"]{"one":1,"two":2,"three":3}{"names":["张三","李四"]}[{"name":"张三"},{"name":"李四"}]

不合格的json物件:

{name:"张三",'age':32}//属性名必须使用双引号[32,64,128,0xFFF]//不能使用十六进制值{"name":"张三","age":undefined}//不能使用undefined{"name":"张三","birthday":newDate('Fri,26Aug201107:13:10GMT'),"getName":function(){returnthis.name;}//不能使用函数和日期对象}

stringify與parse方法

##JavaScript中關於JSON物件和字串轉換的兩個方法:

JSON.parse(): 用於將一個JSON 字串轉換為JavaScript 物件

JSON.parse('{"name":"Q1mi"}'); 
JSON.parse('{name:"Q1mi"}') ; // 错误 
JSON.parse('[18,undefined]') ; // 错误

JSON.stringify(): 用於將JavaScript 值轉換為JSON 字串。

JSON.stringify({"name":"Q1mi"})

與XML的比較

JSON 格式於2001年由 Douglas Crockford 提出,目的就是取代繁瑣笨重的 XML 格式。

JSON 格式有兩個顯著的優點:書寫簡單,一目了然;符合 JavaScript 原生語法,可以由解釋引擎直接處理,不用另外加入解析程式碼。所以,JSON迅速被接受,已經成為各大網站交換資料的標準格式,並被寫入ECMAScript 5,成為標準的一部分。

XML和JSON都使用結構化方法來標記數據,下面來做一個簡單的比較。

以XML表示中國部分省市資料如下:

<?xml version="1.0" encoding="utf-8"?><country><name>中国</name><province><name>黑龙江</name><cities><city>哈尔滨</city><city>大庆</city></cities></province><province><name>广东</name><cities><city>广州</city><city>深圳</city><city>珠海</city></cities></province><province><name>台湾</name><cities><city>台北</city><city>高雄</city></cities></province><province><name>新疆</name><cities><city>乌鲁木齐</city></cities></province></country>XML格式数据

XML格式資料

用JSON表示如下:

{"name":"中国","province":[{"name":"黑龙江","cities":{"city":["哈尔滨","大庆"]}},{"name":"广东","cities":{"city":["广州","深圳","珠海"]}},{"name":"台湾","cities":{"city":["台北","高雄"]}},{"name":"新疆","cities":{"city":["乌鲁木齐"]}}]}JSON格式数据

JSON格式資料

由上面的兩端程式碼可以看出,JSON 簡單的語法格式和清晰的層次結構明顯要比XML 容易閱讀,並且在資料交換方面,由於JSON 所使用的字元要比XML 少得多,可以大大得節約傳輸資料所佔用得頻寬。

AJAX簡介

AJAX(Asynchronous Javascript And XML)翻譯成中文就是「非同步的Javascript和XML」。即使用Javascript語言與伺服器進行非同步交互,傳輸的資料為XML(當然,傳輸的資料不只是XML)。

AJAX 不是新的程式語言,而是一種使用現有標準的新方法。

AJAX 最大的優點是在不重新載入整個頁面的情況下,可以與伺服器交換資料並更新部分網頁內容。 (這項特點給使用者的感受是在不知不覺中完成請求和回應過程)

AJAX 不需要任何瀏覽器插件,但需要使用者允許JavaScript在瀏覽器上執行。

  • 同步交互:客戶端發出一個請求後,需要等待伺服器回應結束後,才能發出第二個請求;

  • 非同步交互:客戶端發出一個請求後,無需等待伺服器回應結束,就可以發出第二個請求。

範例

頁面輸入兩個整數,透過AJAX傳送到後端計算結果並回傳。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>AJAX局部刷新实例</title></head><body><inputtype="text"id="i1">+<inputtype="text"id="i2">=<inputtype="text"id="i3"><inputtype="button"value="AJAX提交"id="b1"><scriptsrc="/static/jquery-3.2.1.min.js"></script><script>$("#b1").on("click",function(){$.ajax({url:"/ajax_add/",type:"GET",data:{"i1":$("#i1").val(),"i2":$("#i2").val()},success:function(data){$("#i3").val(data);}})})</script></body></html>HTML部分代码

HTML部分代碼

def ajax_demo1(request):
    return render(request, "ajax_demo1.html")
def ajax_add(request):
    i1 = int(request.GET.get("i1"))
    i2 = int(request.GET.get("i2"))
    ret = i1 + i2
    return JsonResponse(ret, safe=False)
views.py
views.py
rlpatterns = [
    ...
    url(r&#39;^ajax_add/&#39;, views.ajax_add),
    url(r&#39;^ajax_demo1/&#39;, views.ajax_demo1),
    ... 
]
urls.py

AJAX常見應用情境

搜尋引擎根據使用者輸入的關鍵字,自動提示檢索關鍵字。

還有一個很重要的應用程式場景就是註冊時候的使用者名稱的查重。

其實這裡就使用了AJAX技術!當文件框發生了輸入變化時,使用AJAX技術向伺服器發送一個請求,然後伺服器會把查詢到的結果回應給瀏覽器,最後再把後端回傳的結果展示出來。

整個過程中頁面沒有刷新,只是刷新頁面中的局部位置而已!

當請求發出後,瀏覽器還可以進行其他操作,無需等待伺服器的回應!

當輸入使用者名稱後,把遊標移到其他表單項目時,瀏覽器會使用AJAX技術向伺服器發出請求,伺服器會查詢名為lemontree7777777的使用者是否存在,最終伺服器傳回true表示名為lemontree7777777的用戶已經存在了,瀏覽器在得到結果後顯示「用戶名已被註冊!」。

整個過程中頁面沒有刷新,只是局部刷新了;

#在請求發出後,瀏覽器不用等待伺服器回應結果就可以進行其他操作;

#AJAX的優缺點

優點:

AJAX使用JavaScript技術向伺服器發送非同步請求;

AJAX請求無須刷新整個頁面;

因為伺服器回應內容不再是整個頁面,而是頁面中的部分內容,所以AJAX效能高;

##jQuery實作的AJAX

最基本的jQuery發送AJAX請求範例:

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="x-ua-compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>ajaxtest</title><scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></head><body><buttonid="ajaxTest">AJAX测试</button><script>$("#ajaxTest").click(function(){$.ajax({      url:"/ajax_test/",      type:"POST",      data:{username:"Q1mi",password:123456},      success:function(data){alert(data)}})})</script></body></html>

views.py:

def ajax_test(request): user_name = request.POST.get("username") password = request.POST.get("password") print(user_name, password) return HttpResponse("OK")

$.ajax參數

#

data参数中的键值对,如果值值不为字符串,需要将其转换成字符串类型。

defajax_test(request):user_name=request.POST.get("username")password=request.POST.get("password")print(user_name,password)returnHttpResponse("OK")

JS实现AJAX

varb2=document.getElementById("b2");b2.onclick=function(){// 原生JSvarxmlHttp=newXMLHttpRequest();xmlHttp.open("POST","/ajax_test/",true);xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlHttp.send("username=q1mi&password=123456");xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState===4&&xmlHttp.status===200){alert(xmlHttp.responseText);}};};

AJAX请求如何设置csrf_token

方式1

通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。

$.ajax({  url:"/cookie_ajax/",  
type:"POST",  data:{"username":"Q1mi","password":123456,"csrfmiddlewaretoken":
$("[name = &#39;csrfmiddlewaretoken&#39;]").val()// 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中},  success:function(data){console.log(data);}})

方式2

通过获取返回的cookie中的字符串 放置在请求头中发送。

注意:需要引入一个jquery.cookie.js插件。

$.ajax({  url:"/cookie_ajax/",  type:"POST",  headers:
{"X-CSRFToken":$.cookie(&#39;csrftoken&#39;)},// 从Cookie取csrftoken,并设置到请求头中data:{"username":"Q1mi","password":123456}, 
 success:function(data){console.log(data);}})

或者用自己写一个getCookie方法:

functiongetCookie(name){varcookieValue=null;if(document.cookie&&document.cookie!==&#39;&#39;){varcookies=document.cookie.split(&#39;;&#39;);for(vari=0;i<cookies.length;i++){varcookie=jQuery.trim(cookies[i]);// Does this cookie string begin with the name we want?if(cookie.substring(0,name.length+1)===(name+&#39;=&#39;)){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}returncookieValue;}varcsrftoken=getCookie(&#39;csrftoken&#39;);

每一次都这么写太麻烦了,可以使用$.ajaxSetup()方法为ajax请求统一设置。

注意:

如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值。functioncsrfSafeMethod(method){// these HTTP

methods do not require CSRF protectionreturn(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));}$.ajaxSetup({  beforeSend:function(xhr,settings){if(!csrfSafeMethod(settings.type)&&!this.crossDomain){xhr.setRequestHeader("X-CSRFToken",csrftoken);}}});

如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。

这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。

django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass

更多细节详见:Djagno官方文档中关于CSRF的内容

AJAX上传文件

XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体

首先看一下formData的基本用法:FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可:

介绍一下如何利用 FormData 来上传文件。

django.views.decorators.csrfimportensure_csrf_cookie@ensure_csrf_cookiedeflogin(request):pass

或者使用

var form = document.getElementById("form1"); 
var fd = new FormData(form);

这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。

注意:由于 FormData 是 XMLHttpRequest Level 2 新增的接口,现在 低于IE10 的IE浏览器不支持 FormData。

练习(用户名是否已被注册)

功能介绍

在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。

案例分析

页面中给出注册表单;

在username input标签中绑定onblur事件处理函数。

当input标签失去焦点后获取 username表单字段的值,向服务端发送AJAX请求;

django的视图函数中处理该请求,获取username值,判断该用户在数据库中是否被注册,如果被注册了就返回“该用户已被注册”,否则响应“该用户名可以注册”。

序列化

Django内置的serializers

def books_json(request): book_list = models.Book.objects.all()[0:10] 
from django.core import serializers ret = serializers.serialize("json", book_list) return HttpResponse(ret)

以上是實例講解jQuery與JS實作AJAX的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:简书。如有侵權,請聯絡admin@php.cn刪除
Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。