Ajax簡介

AJAX(Asynchronous Javascript And XML)翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML(當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML,現(xiàn)在更多使用json數(shù)據(jù))。

• 同步交互：客戶端發(fā)出一個請求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個請求；
• 異步交互：客戶端發(fā)出一個請求后，無需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個請求。

AJAX除了異步的特點(diǎn)外，還有一個就是：瀏覽器頁面局部刷新；(這一特點(diǎn)給用戶的感受是在不知不覺中完成請求和響應(yīng)過程)

優(yōu)點(diǎn)：

• AJAX使用Javascript技術(shù)向服務(wù)器發(fā)送異步請求
• AJAX無須刷新整個頁面

基于jquery的Ajax實(shí)現(xiàn)

<button class="send_Ajax">send_Ajax</button> <script>$(".send_Ajax").click(function(){$.ajax({url:"/handle_Ajax/",type:"POST",data:{username:"lewen",password:123},success:function(data){console.log(data)},error: function (jqXHR, textStatus, err) {console.log(arguments);},complete: function (jqXHR, textStatus) {console.log(textStatus);},statusCode: {'403': function (jqXHR, textStatus, err) {console.log(arguments);},'400': function (jqXHR, textStatus, err) {console.log(arguments);}}})})</script>

案列-基于Ajax進(jìn)行登錄驗證

1 用戶名是否已被注冊

在注冊表單中，當(dāng)用戶填寫了用戶名后，把光標(biāo)移開后，會自動向服務(wù)器發(fā)送異步請求。服務(wù)器返回true或false，返回true表示這個用戶名已經(jīng)被注冊過，返回false表示沒有注冊過。客戶端得到服務(wù)器返回的結(jié)果后，確定是否在用戶名文本框后顯示“用戶名已被注冊”的錯誤信息！

2 基于Ajax進(jìn)行登錄驗證?

用戶在表單輸入用戶名與密碼，通過Ajax提交給服務(wù)器，服務(wù)器驗證后返回響應(yīng)信息，客戶端通過響應(yīng)信息確定是否登錄成功，成功，則跳轉(zhuǎn)到首頁，否則，在頁面上顯示相應(yīng)的錯誤信息。

$(".login_btn").click(function () {$.ajax({url: "/login/",type: "post",data: {"user": $("#user").val(),"pwd": $("#pwd").val(),},success: function (data) {console.log(data); // json字符串console.log(typeof data);var res = JSON.parse(data);// 反序列化 object {}console.log(res); // objectconsole.log(typeof res);if (data.user) {location.href = "http://127.0.0.1/index"} else {$(".error").html(data.msg).css({"color": "red", "margin-left": "10px"})}}})})

視圖處理

def login(request):print(request.POST)user = request.POST.get("user")pwd = request.POST.get("pwd")user = User.objects.filter(name=user, pwd=pwd).first()res = {"user": None, "msg": None}if user:res["user"] = user.nameelse:res["msg"] = "username or passwor wrong! "import jsonreturn HttpResponse(json.dumps(res))

文件上傳

請求頭ContentType

ContentType指的是請求體的編碼類型，常見的類型共有3種：

1 application/x-www-form-urlencoded

這應(yīng)該是最常見的 POST 提交數(shù)據(jù)的方式了。瀏覽器的原生 <form> 表單，如果不設(shè)置 enctype 屬性，那么最終就會以 application/x-www-form-urlencoded 方式提交數(shù)據(jù)。請求類似于下面這樣(無關(guān)的請求頭在本文中都省略掉了)：

POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded;charset=utf-8

2 multipart/form-data

這又是一個常見的 POST 數(shù)據(jù)提交的方式。我們使用表單上傳文件時，必須讓 <form> 表單的 enctype 等于 multipart/form-data。

這種方式一般用來上傳文件，各大服務(wù)端語言對它也有著良好的支持。

上面提到的這兩種 POST 數(shù)據(jù)的方式，都是瀏覽器原生支持的，而且現(xiàn)階段標(biāo)準(zhǔn)中原生 <form> 表單也只支持這兩種方式(通過 <form> 元素的 enctype 屬性指定，默認(rèn)為 application/x-www-form-urlencoded。其實(shí) enctype 還支持 text/plain，不過用得非常少)。

隨著越來越多的 Web 站點(diǎn)，尤其是 WebApp，全部使用 Ajax 進(jìn)行數(shù)據(jù)交互之后，我們完全可以定義新的數(shù)據(jù)提交方式，給開發(fā)帶來更多便利

3 application/json

application/json 這個 Content-Type 作為響應(yīng)頭大家肯定不陌生。實(shí)際上，現(xiàn)在越來越多的人把它作為請求頭，用來告訴服務(wù)端消息主體是序列化后的 JSON 字符串。由于 JSON 規(guī)范的流行，除了低版本 IE 之外的各大瀏覽器都原生支持 JSON.stringify，服務(wù)端語言也都有處理 JSON 的函數(shù)，使用 JSON 不會遇上什么麻煩。

JSON 格式支持比鍵值對復(fù)雜得多的結(jié)構(gòu)化數(shù)據(jù)，這一點(diǎn)也很有用。記得我?guī)啄昵白鲆粋€項目時，需要提交的數(shù)據(jù)層次非常深，我就是把數(shù)據(jù) JSON 序列化之后來提交的。不過當(dāng)時我是把 JSON 字符串作為 val，仍然放在鍵值對里，以 x-www-form-urlencoded 方式提交。

基于form表單的文件上傳

模板部分

<form action="" method="post" enctype="multipart/form-data">用戶名 <input type="text" name="user">頭像 <input type="file" name="avatar"><input type="submit"> </form> 點(diǎn)擊submit 后瀏覽器就直接提交

視圖部分

def file_put(request):if request.method == "POST":print("body", request.body) # 請求報文中的請求體print("POST", request.POST) # if contentType==urlencoded ,request.POST才有數(shù)據(jù)print(request.FILES)file_obj = request.FILES.get("avatar")with open(file_obj.name, "wb") as f:for line in file_obj:f.write(line)return HttpResponse("OK")return render(request, "file_put.html")

基于Ajax的文件上傳

模板

<form>用戶名 <input type="text" id="user">頭像 <input type="file" id="avatar"><input type="button" id="ajax-submit" value="ajax-submit"> </form><script>$("#ajax-submit").click(function(){var formdata=new FormData();formdata.append("user",$("#user").val());formdata.append("avatar",$("#avatar")[0].files[0]);$.ajax({url:"",type:"post",data:formdata,processData: false , // 不處理數(shù)據(jù)contentType: false, // 不設(shè)置內(nèi)容類型success:function(data){console.log(data)}})})</script>

將上傳的頭像封裝到formdata 里面

視圖

def file_put(request):if request.method == "POST":print("body", request.body) # 請求報文中的請求體print("POST", request.POST) # if contentType==urlencoded ,request.POST才有數(shù)據(jù)print(request.FILES)file_obj = request.FILES.get("avatar")with open(file_obj.name, "wb") as f:for line in file_obj:f.write(line)return HttpResponse("OK")return render(request, "file_put.html") $(".btn").click(function(){$.ajax({url:"",type:"post",contentType:"application/json",data:JSON.stringify({a:1,b:2}),success:function(data){console.log(data)}})}); ajax 傳json <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> </head> <body><h2>this is Index!</h2><button class="Ajax">Ajax</button><p class="content"></p><hr> <input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"> <button class="cal">計算</button><hr><form>用戶名 <input type="text" id="user">密碼 <input type="password" id="pwd"><input type="button" value="submit" class="login_btn"><span class="error"></span> </form><script>$(".Ajax").click(function () {//發(fā)送Ajax請求$.ajax({url: "/test_ajax/", // 請求urltype: "get", // 請求方式postdata: {a: 1, b: 2},success: function (data) { // 回調(diào)函數(shù)console.log(data);$(".content").html(data)}})});// Ajax計算求值$(".cal").click(function () {$.ajax({url: "/cal/",type: "post",contentType: "multipart/form-data",data: {"n1": $("#num1").val(),"n2": $("#num2").val(),},success: function (data) {console.log(data);$("#ret").val(data);}})});// 登錄驗證$(".login_btn").click(function () {$.ajax({url: "/login/",type: "post",data: {"user": $("#user").val(),"pwd": $("#pwd").val(),},success: function (data) {console.log(data); // json字符串console.log(typeof data);var res = JSON.parse(data);// 反序列化 object {}console.log(res); // objectconsole.log(typeof res);if (data.user) {location.href = "http://127.0.0.1/index"} else {$(".error").html(data.msg).css({"color": "red", "margin-left": "10px"})}}})})</script></body> </html> view all

總結(jié)

以上是生活随笔為你收集整理的Django 与ajax交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。