1. 程式人生 > >json和ajax技術

json和ajax技術

var jquery function 交換 描述 with 缺點 settings 服務器

什麽是json json指的是javaScript對象表示法 json是輕量級的文本數據交換格式 json 獨立於語言 json具有自我描述性,,更易理解 json使用jsvaScript語法描述數據對象,但是jsjon仍然獨立於語言和平臺,json解析器和json庫支持許多不同的編程語言 使用js的時候:轉化為json : JSON.stringify() 轉回字符串:JSON.parse() 使用python 的: 轉化為json : json.dumps 轉回字符串:josn.loads 合格的json對象: ["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]  json為替代XML 的格式 ajax:(Asynchronous Javascript And XML)異步的javascript和XML 是一種異步與服務器交互的一種技術 優勢: 1,異步:發一個請求不用等待響應,可以繼續發下一個請求 2,偷偷的發請求,用戶感受不到,不用刷新 3,數據量小,只需要想要的內容,不需要整個頁面 缺點: 濫用技術,造成服務器壓力 參數: $.ajax({ url:‘/calc/‘ 請求的網址 type:‘post‘, 請求的方式 data:{ ‘i1‘:i1, ‘i2‘:i2 }, success.function(res){ 成功之後做什麽 console.log(res); res 拿到的響應 $(‘#i3‘).val(res) } }) AJAX 不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行。
  • 同步交互:客戶端發出一個請求後,需要等待服務器響應結束後,才能發出第二個請求;
  • 異步交互:客戶端發出一個請求後,無需等待服務器響應結束,就可以發出第二個請求。
<body> <h1>計算</h1> <input type="text" id="i1"> <input type="text" id="i2"> <input type="text" id="i3"> <button type="submit" id="d1">提交</button> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $(‘#d1‘).click(function () { var i1 = $(‘#i1‘).val(); 註意加上val取值 var i2 = $(‘#i2‘).val(); $.ajax({ url:‘/sale/‘, type:‘post‘, data:{ ‘i1‘:i1, ‘i2‘:i2, }, success:function (res) { $(‘#i3‘).val(res) 得到值 } }) }) </script> 在函數中return要使用HttpResponse對象 ajax設置csrf_token 1,通過獲取隱藏的input標簽中的csrfmiddlewaretoken值,放置在data中發送。 "csrfmiddlewaretoken": $("[name = ‘csrfmiddlewaretoken‘]").val()使用jq獲取 $.ajax({ url: "/cookie_ajax/", type: "POST", data: { "username": "Q1mi", "password": 123456, "csrfmiddlewaretoken": $("[name = ‘csrfmiddlewaretoken‘]").val() // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中 }, success: function (data) { console.log(data); } }) 2,放置到請求頭中: headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)}, $.ajax({ url: "/cookie_ajax/", type: "POST", headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)}, // 從Cookie取csrftoken,並設置到請求頭中 data: {"username": "Q1mi", "password": 123456}, success: function (data) { console.log(data); } }) 3,給全局添加: 建立一個js文件: 加入: 1,自己寫的GetCookie方法: 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; } var csrftoken = getCookie(‘csrftoken‘); 2,使用$ajaxSteup()方法為ajax請求同一的設置 function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } }); 如果使用從cookie中取csrftoken的方式,需要確保cookie存在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

json和ajax技術