一、什么是JSON 1.介紹JSON獨立于語言，是一種與語言無關的數據格式。JSON指的是JavaScript對象表示法（JavaScript Object Notation）JSON是輕量級的文本數據交換格式JSON具有自我描述性，更易理解JSON使用JavaScript語法來描述數據對象，但是JSON仍然獨立于語言和平臺。JSON解析器和JSON庫支持許多不同的編程語言。2. Python中JSON操作import json1. json.dumps() --> 序列化 /json.dump() --> 文件操作 2. json.loads() --> 反序列化 /json.load() --> 文件操作3. JS中JSON操作1. JSON.stringify() --> 序列化2. JSON.parse() --> 反序列化
4. 例如合格的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": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),"getName": function() {return this.name;} // 不能使用函數和日期對象}5. 與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> View Code

　　用JSON表示如下： {"name": "中國","province": [{"name": "黑龍江","cities": {"city": ["哈爾濱", "大慶"]}}, {"name": "廣東","cities": {"city": ["廣州", "深圳", "珠海"]}}, {"name": "臺灣","cities": {"city": ["臺北", "高雄"]}}, {"name": "新疆","cities": {"city": ["烏魯木齊"]}}]} View Code 由上面的兩端代碼可以看出，JSON 簡單的語法格式和清晰的層次結構明顯要比 XML 容易閱讀，并且在數據交換方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得節約傳輸數據所占用得帶寬二、AJAX簡介 1、介紹AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步的Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。AJAX 不是新的編程語言，而是一種使用現有標準的新方法。AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據并更新部分網頁內容。（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。2、AJAX常見應用情景 1.搜索引擎根據用戶輸入的關鍵字，自動提示檢索關鍵字。2.還有一個很重要的應用場景就是注冊時候的用戶名的查重。其實這里就使用了AJAX技術！當文件框發生了輸入變化時，使用AJAX技術向服務器發送一個請求，然后服務器會把查詢到的結果響應給瀏覽器，最后再把后端返回的結果展示出來。當輸入用戶名后，把光標移動到其他表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢你輸入的用戶名是否存在，最終服務器返回true表示名你輸入的用戶名已經存在了，瀏覽器在得到結果后顯示“用戶名已被注冊！”。整個過程中頁面沒有刷新，只是局部刷新了；在請求發出后，瀏覽器不用等待服務器響應結果就可以進行其他操作；3、AJAX的優缺點優點：AJAX使用JavaScript技術向服務器發送異步請求；AJAX請求無須刷新整個頁面；因為服務器響應內容不再是整個頁面，而是頁面中的部分內容，所以AJAX性能高；
　　缺點：
　　　　AJAX濫用對服務端壓力比較大三、JS實現AJAX 1.注意：一般我們都不使用原生的JS實現AJAX，因為原生JS的步驟太繁瑣(下面會介紹簡單的AJAX實現)2. JS實現AJAX模板 var b2 = document.getElementById("b2");b2.onclick = function () {// 原生JSvar xmlHttp = new XMLHttpRequest();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);}};}; View Code

?

四、AJAX請求設置csrf_token 1、方式1 通過獲取隱藏的input標簽中的csrfmiddlewaretoken值，放置在data中發送。 $.ajax({url: "/login/",type: "POST",data: {"username": "xm","password": 123,"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中 },success: function (res) {console.log(res);} }) View Code

2、方式2 通過獲取返回的cookie中的字符串 放置在請求頭中發送(需要引入一個jquery.cookie.js插件) $.ajax({url: "/login/",type: "POST",headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 從Cookie取csrftoken，并設置到請求頭中data: {"username": "xm", "password": 123},success: function (res) {console.log(res);} }) View Code

3、方式3 自己寫一個getCookie方法 創建一個JS文件，代碼如下： (這是官網提供的代碼) // 定義一個從本地獲取Cookie的函數 function getCookie(name) {var cookieValue = null;if (document.cookie && document.cookie !== '') {var cookies = document.cookie.split(';');for (var i = 0; i < cookies.length; i++) {var cookie = 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;}}}return cookieValue; } // 調用上面定義的函數，從本地取出csrftoken對應的Cookie值 var csrftoken = getCookie('csrftoken');function csrfSafeMethod(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) {// 給所有的AJAX請求設置請求頭：xhr.setRequestHeader("X-CSRFToken", csrftoken);}} }); View Code 使用的時候只需要導入你這個JS代碼，ajxa請求就不需要自己手動添加csrf的值了注意：方式3和方式2其實是同一種方法，只是方式2是使用別人寫好的插件，方式3是自己寫而已。如果使用從cookie中取csrftoken的方式，需要確保cookie存在csrftoken值。如果你的視圖渲染的HTML文件中沒有包含 {% csrf_token %}，Django可能不會設置CSRFtoken的cookie。這個時候需要使用ensure_csrf_cookie()裝飾器強制設置Cookie。使用方式2和3需要在views.py的視圖函數中加上這個裝飾器確保瀏覽器中有cookie django.views.decorators.csrf import ensure_csrf_cookie@ensure_csrf_cookie def login(request):pass五、jQuery實現的AJAX 1、最基本的ajax 發送ajax請求 $.ajax({})參數：url: 提交到哪個URL地址type: 提交的方式data: {你要發送的數據}success: function (res) {請求發送過去，被正常響應后執行的函數，res是后端返回來的數據}error: function (err) {請求發送過去，響應失敗時執行的函數}2、驗證用戶名是否存在的例子 1. models.py class UserInfo(models.Model):username = models.CharField(max_length=12)password = models.CharField(max_length=20)2. HTML代碼 <!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="content-type" charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Login</title> </head><body><p><label for="i1">用戶名：</label><input type="text" name="username" id="i1"><span id="s1" style="color: red;"></span> </p>{% csrf_token %}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript">$("#i1").blur(function () {//輸入框失去焦點時觸發ajax請求 $.ajax({url: '/regirest/',type: 'POST',data: {username: $("#i1").val(), // 防止跨站偽造請求，需要添加csrf_token的值 csrfmiddlewaretoken: $("[name = 'csrfmiddlewaretoken']").val(),},success: function (res) {$("#s1").text(res)}})}) </script></body> </html> View Code

3. views.py def regirest(request):if request.method == 'POST':username = request.POST.get('username')is_exist = UserInfo.objects.filter(username=username)if is_exist:return HttpResponse('用戶名已存在')else:return HttpResponse('用戶名可用')return render(request, 'regirest.html') View Code

3、用戶登錄例子 1. HTML代碼 <!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="content-type" charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Login</title> </head><body><div><h1>歡迎登錄</h1></div> <div><p><label for="i1">用戶名：</label><input type="text" id="i1"></p><p><label for="i2">密碼：</label><input type="password" id="i2"></p><p><button type="button" id="b1">登錄</button><span style="color: red"></span></p>{% csrf_token %} </div><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript">$("#b1").click(function () {$.ajax({url: '/login/',type: 'POST',data: {username: $("#i1").val(),pwd: $("#i2").val(),// 防止跨站偽造請求，需要添加csrf_token的值 csrfmiddlewaretoken: $("[name = 'csrfmiddlewaretoken']").val(),},success: function (res) {if (res.code === 0){location.href = res.next_url}else {// 有錯誤 $("#b1+span").text(res.err_msg)}}})}) </script></body> </html> View Code

2. views.py class LoginView(views.View):def get(self, request):return render(request, 'login.html')def post(self, request):username = request.POST.get('username')pwd = request.POST.get('pwd')is_ok = UserInfo.objects.filter(username=username, password=pwd)res = {'code': 0} # 登錄狀態 0代表登錄成功if is_ok:# 登錄成功，跳轉到regirest頁面res['next_url'] = '/regirest/'return JsonResponse(res)else:# 登錄失敗，在頁面上顯示錯誤提示res['code'] = 1res['err_msg'] = '用戶名或者密碼錯誤'return JsonResponse(res) View Code

?

4、上傳文件例子 1. HTML代碼 <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="content-type" charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Upload</title> </head> <body>{% csrf_token %}<h1>上傳文件</h1> <div> <input type="file" id="f1"> <button id="b1"> 上傳</button> </div> <span style="color: red" id="s1"></span><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script>$('#b1').click(function () {// 取到要上傳的文件數據，存到一個對象中var fdObj = new FormData();fdObj.append('xx', $('#f1')[0].files[0]);// 在請求的數據中添加csrftokrnvar csrfToken = $('[name="csrfmiddlewaretoken"]').val();fdObj.append('csrfmiddlewaretoken', csrfToken);// 發ajax請求 $.ajax({url: '/upload/',type: 'post',data: fdObj,processData: false, // 告訴jQuery不要處理我上傳的數據 contentType: false, // 告訴jQuery不要設置請求的文件類型,這兩個參數相當于enctype="multipart/form-data" success: function (res) {$("#s1").text(res);}})}) </script> </body> </html> View Code

2.views.py class UploadView(views.View):def get(self, request):return render(request, 'upload.html')def post(self, request):file_obj = request.FILES.get('xx')file_name = file_obj.namewith open(file_name, 'wb') as f:for c in file_obj.chunks():f.write(c)return HttpResponse('上傳成功！') View Code

?

?

轉載于:https://www.cnblogs.com/yidashi110/p/10091961.html

總結

以上是生活随笔為你收集整理的AJAX初识(原生JS版AJAX和Jquery版AJAX)的全部內容，希望文章能夠幫你解決所遇到的問題。

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