django學習第85天Django的Ajax
阿新 • • 發佈:2019-01-18
表單提交 resp ces var 編碼 form span htm req
一.什麽是Ajax:
通過js語言跟後臺進行交互的一個東西
-特點:異步,局部刷新
-之前學了form表單提交,地址欄中輸入地址
-js的語法:jquery的$.ajax()
二.怎麽用
ajax往後臺提交數據 $.ajax({ url:‘請求的地址‘, type:‘get/post‘,
contentType:application/json 指定前端傳到後端的編碼格式是json,數據在body裏
datetype:‘json‘ 指定後端傳到前端的數據格式是json,然後ajax轉成object字典 data:{key:value,key2:value2}, success:function(data){ alert(data) } })
json格式傳送數據
前端
$(‘#btn2‘).click(function () { var user={name:$(‘#msg1‘).val(),pwd:$(‘#msg2‘).val()} console.log(user) $.ajax({ url:‘/01test/‘, type:‘post‘, contentType:‘application/json‘, data:JSON.stringify(user), success:function (data) { if (data.status==100) { location.href = data.url console.log(data.status) }else{ console.log(data) alert(‘賬號或密碼錯誤‘) } } }) })
後端
import json
def test01(request):
dic = {‘status‘: 100}
user=json.loads(request.body.decode(‘utf-8‘))
print(user)
name=user.get(‘name‘)
pwd=user.get(‘pwd‘)
if name == ‘hui‘ and pwd == ‘123‘:
dic[‘status‘] = 100
dic[‘url‘] = ‘/book/‘
else:
dic[‘status‘] = 101
print(dic)
return JsonResponse(dic)
不帶json格式傳送數據
前端
$(‘#btn1‘).click(function () {
var usr=$(‘#msg1‘).val();
var pwd1=$(‘#msg2‘).val();
$.ajax({
url:‘/test/‘,
type:‘post‘,
data:{name:$(‘#msg1‘).val(),pwd:$(‘#msg2‘).val()},
success:function (data) {
if (data.status==100) {
location.href=data.url
console.log(data.status)
}else{
console.log(data)
alert(‘賬號或密碼錯誤‘)
}
}
})
})
後端
def test(request):
if request.method==‘GET‘:
return render(request,‘test.html‘)
else:
print(request)
dic={‘status‘:100}
name=request.POST.get(‘name‘)
pwd=request.POST.get(‘pwd‘)
print(name,pwd)
if name==‘hui‘ and pwd==‘123‘:
dic[‘status‘]=100
dic[‘url‘]=‘/book/‘
else:
dic[‘status‘]=101
print(dic)
return JsonResponse(dic)
django學習第85天Django的Ajax