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'^ajax_add/', views.ajax_add), url(r'^ajax_demo1/', 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")
# data参数中的键值对,如果值值不为字符串,需要将其转换成字符串类型。 JS实现AJAX AJAX请求如何设置csrf_token 方式1 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。 方式2 通过获取返回的cookie中的字符串 放置在请求头中发送。 注意:需要引入一个jquery.cookie.js插件。 或者用自己写一个getCookie方法: 每一次都这么写太麻烦了,可以使用$.ajaxSetup()方法为ajax请求统一设置。 注意: 如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值。functioncsrfSafeMethod(method){// these HTTP 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。 这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。 更多细节详见: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 来上传文件。 或者使用 这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。 注意:由于 FormData 是 XMLHttpRequest Level 2 新增的接口,现在 低于IE10 的IE浏览器不支持 FormData。 练习(用户名是否已被注册) 功能介绍 在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。 案例分析 页面中给出注册表单; 在username input标签中绑定onblur事件处理函数。 当input标签失去焦点后获取 username表单字段的值,向服务端发送AJAX请求; django的视图函数中处理该请求,获取username值,判断该用户在数据库中是否被注册,如果被注册了就返回“该用户已被注册”,否则响应“该用户名可以注册”。 序列化 Django内置的serializersdefajax_test(request):user_name=request.POST.get("username")password=request.POST.get("password")print(user_name,password)returnHttpResponse("OK")
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({ url:"/cookie_ajax/",
type:"POST", data:{"username":"Q1mi","password":123456,"csrfmiddlewaretoken":
$("[name = 'csrfmiddlewaretoken']").val()// 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中}, success:function(data){console.log(data);}})
$.ajax({ url:"/cookie_ajax/", type:"POST", headers:
{"X-CSRFToken":$.cookie('csrftoken')},// 从Cookie取csrftoken,并设置到请求头中data:{"username":"Q1mi","password":123456},
success:function(data){console.log(data);}})
functiongetCookie(name){varcookieValue=null;if(document.cookie&&document.cookie!==''){varcookies=document.cookie.split(';');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+'=')){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}returncookieValue;}varcsrftoken=getCookie('csrftoken');
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);}}});
django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass
django.views.decorators.csrfimportensure_csrf_cookie@ensure_csrf_cookiedeflogin(request):pass
var form = document.getElementById("form1");
var fd = new FormData(form);
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中文網其他相關文章!

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

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

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

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

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

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

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

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


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

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

Atom編輯器mac版下載
最受歡迎的的開源編輯器

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

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

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