码迷,mamicode.com
首页 > Web开发 > 详细

django学习第85天Django的Ajax

时间:2019-01-18 10:16:27      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:bsp   表单提交   status   输入   else   date   print   decode   学习   

一.什么是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

标签:bsp   表单提交   status   输入   else   date   print   decode   学习   

原文地址:https://www.cnblogs.com/ye-hui/p/10285916.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!