7.Ajax

小Pawn爷

已于 2022-04-10 10:19:53 修改

阅读量125

点赞数

分类专栏： 2.Web框架-django 文章标签：前端

于 2021-03-07 09:52:46 首次发布

本文链接：https://blog.csdn.net/weixin_44689630/article/details/114477567

版权

2.Web框架-django 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.定义

1	2
定义	AJAX（Asynchronous Javascript And XML）翻译成中文就是 “异步 Javascript 和 XML”
优点	异步和局部刷新
场景	注册登录

2.编码格式

2.1urlencoded

POST <QueryDict: {‘user’: [‘a’]}>

urlencoded:(默认类型)
1.Django后端拿到符合urlencoded编码格式诸如username=abcde&password=123456会自动帮你解析分装到`request.POST`中
2. serialize() 方法可将, 以及表单序列化成urlencoded格式数据

2.2formdata

POST <QueryDict: {‘user’: [‘a’]}>
<MultiValueDict: {‘avatar’: [<InMemoryUploadedFile: 222417.jpg (image/jpeg)>]}>

formdata
1.上传文件的表单上需要添加enctype="multipart/form-data属性
2.使用FormData对象时processData(预处理),contentType(指定编码)全都为false

2.3json

json.loads(request.body.decode())<QueryDict: {‘user’: [‘a’]}>

json
1. `contentType`参数指定成`application/json`;
2.数据需要使用JSON.stringify进行转换
3.json格式数据需要你自己去`request.body`获取并处理

3. 如何通过csrf认证

序号	方法	举例
1	第一种方式直接在发送数据中加入csrfmiddlewaretoken	`data:{ csrfmiddlewaretoken: {{ csrf_token }}, //写在模板中，才会被渲染 }`
2	使用jquery.cookie.js调用请求头cookie中的csrftoken	`data:{ csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val(), }`
3	使用jquery.cookie.js调用请求头cookie中的csrftoken	`headers:{"X-CSRFToken":$.cookie('csrftoken')}`

注意: 数据格式为formdata时不需要特定添加csrftoken值

3.示例

1.基础使用

<button>send_Ajax</button>
<script>

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

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},
               success:function(data){
                   console.log(data)
               },        　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },
               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },
               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },
                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }
           })
       })
</script>

2.两个数相加

1.view

def digit_add(request):
    if request.method == "POST":
        n1 = int(request.POST.get("n1"))
        n2 = int(request.POST.get("n2"))
        ret = n1 + n2
        return HttpResponse(ret)

    return render(request, "digit_add.html")

2.digit_add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="n1" value="">+
<input type="text" id="n2" value="">=
<input type="text" id="n3" value="">
<button class="cal">计算</button>
</body>
<script>
    window.onload = function () {
        $(".cal").click(
            function () {
                $.ajax({
                    url: '',
                    type: "post",
                    data: {
                        "n1": $("#n1").val(),
                        "n2": $("#n2").val(),
                    },
                    success: function (data) {
                        console.log(data);
                        $("#n3").val(data);
                    }
                })
            }
        )
    }

</script>
</html>

3.登录验证

在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求,服务器返回 true 或 false,返回 true 表示这个用户名已经被注册过,返回 false 表示没有注册过.客户端得到服务器返回的结果后,确定是否在用户名文本框后显示 “用户名已被注册” 的错误信息

用户在表单输入用户名与密码,通过 Ajax 提交给服务器,务器验证后返回响应信息,客户端通过响应信息确定是否登录成功,成功,则跳转到首页,否则,在页面上显示相应的错误信息。

view.py

def login(request):
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")
    user = User.objects.filter(name=user, pwd=pwd).first()
    res = {"user": None, "msg": None}
    if user:
        res["user"] = user.name
    else:
        res["msg"] = "username or password wrong! "
    return HttpResponse(json.dumps(res))

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<div>
    <h3>示例2 登录验证</h3>
    <form>
        用户名 <input type="text" id="user">
        密码 <input type="password" id="pwd">
        <input type="button" value="submit" class="login_btn"><span class="error"></span>
    </form>
</div>


</body>
<script>
    window.onload = function () {
        {# 示例2 登录验证   #}
        $(".login_btn").click(function () {
            $.ajax({
                url: "/books_app/login",
                type: "post",
                data: {
                    "user": $("#user").val(),
                    "pwd": $("#pwd").val(),
                },
                success: function (data) {
                    console.log(typeof data);
                    let user_data = JSON.parse(data);
                    console.log(typeof user_data );
                    if (user_data.user) {
                        location.href = "http://www.baidu.com"
                    } else {
                        $(".error").html(user_data .msg).css({"color": "red"})
                    }
                }
            })
        })

    }

</script>
</html>

4.文件上传

1.Form表单文件上传

1.html代码

<div>
    <h3>示例1:基于form表单的文件上传</h3>
    <form action="" method="post" enctype="multipart/form-data">
        <label for="user" >用户名</label>
        <input type="text" name="user" id="user">
        <label for="avatar">头像</label>
        <input type="file" name="avatar" id="avatar">
        <input type="submit">
    </form>
</div>

2.views代码

def file_put(request):
    if request.method == "POST":
        print("body", request.body)
        print("POST", request.POST)
        print(request.FILES)
        file_obj = request.FILES.get("avatar")
        with open(file_obj.name, "wb") as f:
            for line in file_obj:
                f.write(line)
        return HttpResponse("ok")
    return render(request, "file_put.html")

交互数据为formdata时request的数据如下:

body b'------WebKitFormBoundarypHMfwVTDyP6Gc925\r\nContent-Disposition: form-data; name="user"\r\n\r\na\r\n------WebKitFormBoundarypHMfwVTDyP6Gc925\r\nContent-Disposition: form-data; name="avatar"; filename="222417.jpg"\r\nContent-Type: image/jpeg\r\n\r\n\xff\xd8\xf....\xd9\r\n------WebKitFormBoundarypHMfwVTDyP6Gc925--\r\n'
POST <QueryDict: {'user': ['a']}>
<MultiValueDict: {'avatar': [<InMemoryUploadedFile: 222417.jpg (image/jpeg)>]}>

注意:

1	2	3
显式的联系：	将表单控件作为标记标签的内容	`<label for="SSN">Social Security Number:</label><br/><input type="text" name="SocSecNum" id="SSN" />`
隐式的联系：	为标签下的 for 属性命名一个目标表单 id	`<label>Date of Birth: <input type="text" name="DofB" /></label>`

2.Ajax文件上传

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div>
    <h3>示例2:基于form表单的文件上传</h3>
    <form action="" method="post" >
        <label for="user">用户名</label>
        <input type="text" name="user" id="user">
        <label for="avatar">头像</label>
        <input type="file" name="avatar" id="avatar">
        <input type="button" class="btn" value="提交">
    </form>
</div>
</body>
<script>
    window.onload = function () {
        $(".btn").click(function () {
            let formData = new FormData();
            formData.append("user", $('#user').val());
            formData.append("avatar", $('#avatar')[0].files[0]);
            $.ajax({
                url: "",
                type: "post",
                contentType: false,
                processData: false,
                data: formData,
                success: function (data) {
                    console.log(data)
                }
            })
        })
    }
</script>
</html>

2.views代码

def file_put(request):
    if request.method == "POST":
        print("body", request.body)
        print("POST", request.POST)
        print(request.FILES)
        file_obj = request.FILES.get("avatar")
        with open(file_obj.name, "wb") as f:
            for line in file_obj:
                f.write(line)
        return HttpResponse("ok")
    return render(request, "file_put.html")