django学习第85天Django的Ajax

Posted 2021-02-04 yehuihuihui

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