Ajax簡介

AJAX(Asynchronous Javascript And XML)翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML(當然，傳輸的數據不只是XML,現在更多使用json數據)。

• 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
• 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。

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

優點：

• AJAX使用Javascript技術向服務器發送異步請求
• AJAX無須刷新整個頁面

基于jquery的Ajax實現

<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進行登錄驗證

1 用戶名是否已被注冊

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

2 基于Ajax進行登錄驗證?

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

$(".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

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

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

2 multipart/form-data

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

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

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

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

3 application/json

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

JSON 格式支持比鍵值對復雜得多的結構化數據，這一點也很有用。記得我幾年前做一個項目時，需要提交的數據層次非常深，我就是把數據 JSON 序列化之后來提交的。不過當時我是把 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> 點擊submit 后瀏覽器就直接提交

視圖部分

def file_put(request):if request.method == "POST":print("body", request.body) # 請求報文中的請求體print("POST", request.POST) # if contentType==urlencoded ,request.POST才有數據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 , // 不處理數據contentType: false, // 不設置內容類型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才有數據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 () {//發送Ajax請求$.ajax({url: "/test_ajax/", // 請求urltype: "get", // 請求方式postdata: {a: 1, b: 2},success: function (data) { // 回調函數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

總結

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

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