Django Ajax學習一
阿新 • • 發佈:2017-11-14
use and nal span 說明 ces rect tostring import
1. 簡單的加法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="a" id="a"><span>+</span><input type="text" name="b" id="b"> <button class="action">=</button> <input type="text" name="sum" id="c"> <script src="jquery-3.2.1.min.js"></script> <script> $(".action").click(function () { a = parseInt($("#a").val()); b = parseInt($("#b").val()); c=a+b; $.ajax($("#c").val(c)) }) </script> </body> </html>
2. 用戶登錄驗證
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="/get_OK/">點擊</a><span class="error"></span> <p>姓名:<input type="text" name="name"></p> <p>密碼:<input type="password" name="pwd"></p> <span class="login_error"></span> <p> <button class="Ajax_send">Ajax_send</button> </p> <script src="/static/jquery-3.2.1.min.js"></script> <script> $(".Ajax_send").click(function () { // ajax請求 $.ajax({ url: "/get_ajax/", type: ‘GET‘, data: JSON.stringify({ name: $(":text").val(), pwd: $(":password").val() }), contentType:"application/json", success: function (data) { console.log(data); var data=JSON.parse(data); if(!data){ $(".login_error").html(‘用戶名或密碼錯誤‘); } } }) }) </script> </body> </html>
3. 視圖函數
import json from django.shortcuts import render,redirect,HttpResponse # Create your views here. def index(request): return render(request,‘index.html‘) def get_OK(request): return render(request,‘get_OK.html‘) def get_ajax(request): username=request.GET.get(‘name‘) password=request.GET.get(‘pwd‘) flag=False if username=="yuan" and password ==‘123‘: flag =True return HttpResponse(json.dumps(flag))
3. 參數說明:
######################------------data---------################ data: 當前ajax請求要攜帶的數據,是一個json的object對象,ajax方法就會默認地把它編碼成某種格式 (urlencoded:?a=1&b=2)發送給服務端;此外,ajax默認以get方式發送請求。 function testData() { $.ajax("/test",{ //此時的data是一個json形式的對象 data:{ a:1, b:2 } }); //?a=1&b=2 ######################------------processData---------################ processData:聲明當前的data數據是否進行轉碼或預處理,默認為true,即預處理;if為false, 那麽對data:{a:1,b:2}會調用json對象的toString()方法,即{a:1,b:2}.toString() ,最後得到一個[object,Object]形式的結果。 ######################------------contentType---------################ contentType:默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。 用來指明當前請求的數據編碼格式;urlencoded:?a=1&b=2;如果想以其他方式提交數據, 比如contentType:"application/json",即向服務器發送一個json字符串: $.ajax("/ajax_get",{ data:JSON.stringify({ a:22, b:33 }), contentType:"application/json", type:"POST", }); //{a: 22, b: 33} 註意:contentType:"application/json"一旦設定,data必須是json字符串,不能是json對象 ######################------------traditional---------################ traditional:一般是我們的data數據有數組時會用到 :data:{a:22,b:33,c:["x","y"]}, traditional為false會對數據進行深層次叠代;
待續.. ...
Django Ajax學習一