Ajax

Posted 2021-05-07 jnhnsnow

　　向服务器发请求的方式：

　　　　　　- 浏览器地址栏 get

　　　　　　- form表单 get / post

　　　　　　- a标签 get

　　　　　　- ajax  get / post:

　　　　　　　　　　- 1.异步

　　　　　　　　　　- 2. 局部刷新

　　基于jquery简单实现Ajax

<button>ajax_button</button>
<script>
    $(‘button‘).click(function () {
        $.ajax(
            {
                url:‘{% url "app01:index" %}‘,
                type:‘get‘, //post
                //data:{ }, //键值形式  get请求在 request.GET    post为request.POST
                success:function (data) {
                    alert(data)
                }
            }
        )
    })
</script>

　　\ post    data     ‘csrfmiddlewaretoken‘:$(‘[name="csrfmiddlewaretoken"]‘).val(),

　　\ js:  反序列化 JSON.parse(data);

　 \  #校验登录思路

后端
import json

res = {‘user‘:None,‘msg‘:None} 
if 登陆成功:
            res[‘user‘] = user
        else:
            res[‘msg‘] = "登陆失败"
        return HttpResponse(json.dumps(res))

#也可以 from django.http import JsonRsponse
　　　　return  JsonResponse (res)  #前端不需要反序列化！

　　　　　
前端

 $(".log_btn").click(function () {
        $.ajax({
            url:"{% url ‘app01:log‘ %}",
            data:{
                ‘user‘:$(".user").val(),
                ‘pwd‘:$(".pwd").val(),
                 ‘csrfmiddlewaretoken‘:$(‘[name="csrfmiddlewaretoken"]‘).val(),
            },
            type:‘post‘,
            success:function (data) {
                var data1 = JSON.parse(data); //反序列化
                if(data1.user){
                   location.href = ‘https://www.baidu.com‘
                }else {$(".error").html(data1.msg).css({‘color‘:‘red‘})}
            }
        })
    })