django Ajax介绍

1.Ajax技术

　　认识ajax之前必须先了解json模块，json(Javascript Obiect Notation,JS对象标记)属于一种轻量级的数据交换格式

　　json的格式来源于js的格式，也可以说json是js的一个子集

　　json只认双引号的，它一定是一个字符串

1.1 js下的序列化和反序列化

　　JSON.stringify():用于将一个JavaScript对象转换为JSON字符串

　　JSON.parse():用于将一个JSON字符串转换为JavaScript对象

<script>

//===========js中的json序列化===========

s = '{"name":1}';

var data = JSON.parse(s);

console.log(data);

console.log(typeof data);   //object

//===========js中的json的反序列化=======

s2={'name':'yuan'};

console.log(JSON.stringify(s2),typeof JSON.stringify(s2))  //string

</script>

1.2 ajax介绍

前端向后端发送数据的方式：

　　GET：地址栏、a标签、Form表单

　　POST：Form表单

ajax：也是前端向后端发送数据的一种方式。

AJAX（Asynchronous Javascript And XML）,中文就是“异步Javascript和XML”

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

Ajax的特点：

　　异步交互：　当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

　　局部刷新：整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

应用场景：

　　百度搜索，输入某个字或内容时，我们并没有提交请求，但是搜索栏会出现与你输入的内容相关的下拉列表，这就使用了ajax技术。整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

1.3 基于jquery应用下的ajax

应用一：

通过点击按钮实现局部刷新，显示出结果6666

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

</head>

<body>

{#简单应用#}

<button class="btn">click</button>

<p class="con"></p>

<script>

    $(".btn").click(function(){

        //发送ajax请求

        $.ajax({

            url:"/eleven/",

            type:"get",

            // 形参data参数必须要传，它其实就是response返回的值

            success:function (data) {

                $(".con").html(data);

            }

        })

    });

</script>

</body>

</html>

views.py

def index(request):

    return  render(request,"index.html")

def eleven(request):

    return HttpResponse(6666)

urls.py

 path("index/",views.index),

 path("eleven/",views.eleven),

点击click最终效果：（这个效果并没有全局刷新，而是点击后局部刷新得到的）

应用二：

在url页面按钮框输入数字实现加法运算

这里我不一一例了，只用把案例一index.thml中输入部分和jquery部分换掉即可

index.html

{#计算#}

<input type="text" class="n1"> + <input type="text" class="n2"> =<input type="text" class="n3">

<button class="cal">计算</button>

{% csrf_token %}

    //携带参数进行请求，获取的n1,n2就是我们在浏览器输入的值。data里面的值传给了视图函数

    $(".cal").click(function () {

        var n1 = $(".n1").val();

        var n2 = $(".n2").val();

        $.ajax({

            url: /cal/,

            type: "post",

            data: {

                a: n1,

                b: n2,

                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),

            },

            success: function (data) {

                console.log(data);

                $(".n3").val(data);

            }

        })

    });

views.py

def cal(request):

    a = request.POST.get("a")

    b = request.POST.get("b")

    res = int(a) + int(b)

    return HttpResponse(str(res))

urls.py

path("index/",views.index),

path("cal/", views.cal),

应用三：

实现登录验证功能

form表单已经不用再定义是什么请求，这一步都在ajax中实现

{#用户验证#}

<form action="">

    用户名 <input type="text" id="user">

    密码 <input type="password" id="pwd">

    <input type="button" value="submit" id="login_btn"><span class="error"></span>

</form>

    // 登录验证

    $("#login_btn").click(function () {

        $.ajax({

            url: "/login/",

            type: "post",

            data: {

                user: $("#user").val(),

                pwd: $("#pwd").val(),

                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),

            },

            // 这里关键是视图函数返回的data的数据类型

            success: function (data) {

                console.log(data);

                console.log(typeof data);

                var data = JSON.parse(data);

                console.log(data);

                console.log(typeof data);

                if (data.user) {

                }

                // if(user),表明成功，失败了对传过来的文本修改颜色

                else {

                    $(".error").text(data.msg).css({"color": "red", "margin-left": "20px"})
　　　　　　　　　　　　setTimeout(function(){
　　　　　　　　　　　　　　setTimeout(function(){
　　　　　　　　　　　　　　　　$(".error").text("")
　　　　　　　　　　　　　　},1000)　　

                }

            }

        })

    });

views.py

from book.models import User

import json

def login(request):

    # 先要从数据库导入相关个人账号和密码

    user = request.POST.get("user")

    pwd = request.POST.get("pwd")

    # 获取账号和密码

    user_obj = User.objects.filter(user=user, pwd=pwd).first()

    response = {"user": None, "msg": None}

    if user_obj:

        response["user"] = user_obj.user

    else:

        response["msg"] = "用户名或者密码不一致"

    # 确保dumps的数据编码一致性

    return HttpResponse(json.dumps(response, ensure_ascii=False))

models.py

class User(models.Model):

    user = models.CharField(max_length=32)

    pwd = models.CharField(max_length=32)

urls.py

path("index/",views.index),

path("login/", views.login),

效果：

1.4 csrf跨站请求伪造

一般会由于这个问题报一个Fororbidden的错，自己在ajax下的data中组装一组键值对即可解决

<form>

{% csrf_token %}

</form>

  data:{

        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),

        name:$(":text").val(),

        pwd:$(":password").val()

  },