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學習一