7 Ajax请求

客户端（浏览器）向服务端发起请求的形式：

  1. 地址栏：GET
  2. 超链接标签：GET
  3. form表单：GET或POST
  4. Ajax（重要）：GET或POST或PUT或DELETE

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

AJAX的特点和优点：

  • 异步
  • 局部刷新

应用：

image

1 JSON数据

'''
Supports the following objects and types by default:

    +-------------------+---------------+
    | Python            | JSON          |
    +===================+===============+
    | dict              | object        |
    +-------------------+---------------+
    | list, tuple       | array         |
    +-------------------+---------------+
    | str               | string        |
    +-------------------+---------------+
    | int, float        | number        |
    +-------------------+---------------+
    | True              | true          |
    +-------------------+---------------+
    | False             | false         |
    +-------------------+---------------+
    | None              | null          |
    +-------------------+---------------+

'''

1-1 python序列化&反序列化

import json

data = {"name": "yuan", 'age': 22, 'is_married': False}
print(json.dumps(data))
# {"name": "yuan", "age": 22, "is_married": false}
print(repr(json.dumps(data)))  # 查看原生字符串
# '{"name": "yuan", "age": 22, "is_married": false}'

rel = [{"name": "紫薇", 'age': 19}]
print(repr(json.dumps(rel)))
# '[{"name": "\\u7d2b\\u8587", "age": 19}]'


# 反序列化
json_data = json.dumps(data)
data = json.loads(json_data)
print(data, type(data))

1-2 Django序列化

关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户，特别的Ajax请求一般返回的为Json格式。

# 序列化响应类
from django.http import JsonResponse
JsonResponse({})

# 序列化queryset
from django.core import serializers
ret = models.Book.objects.all()
data = serializers.serialize("json", ret)

2 Ajax请求

视图：

from django.http import JsonResponse

# Create your views here.
def reg(request):
    return render(request, "reg.html")

def reg_user(request):
    data = {"msg": "", "state": "success"}
    user = request.POST.get("user")
    if user == "yuan":
        data["state"] = "error"
        data["msg"] = "该用户已存在！"

    return JsonResponse(data)
# 当使用JsonResponse时，Ajax会自动反解Json数据，所以在模板中可直接使用。

模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>用户名：<input type="text"><span class="error" style="color: red"></span></p>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>

    $(":text").blur(function () {
        // 发送Ajax请求
        $.ajax({
            url: "http://127.0.0.1:8008/reg_user/",
            type: "post",
            data: {
                user: $(":text").val(),
            },
            success: function (response) {
                // 响应正确数据处理
                console.log(response);
                $(".error").html(response.msg);
            },
            error: function (res) {
                // 响应错误数据处理
            }
        })
    })

</script>
</body>
</html>

流程图：

image


3 同源策略

1.同源策略和跨域
现在我们将reg.html单独放在客户端，用浏览器打开，再触发事件，会发现报错：

image

这是因为浏览器的同源策略导致的。

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

图解：

image

那么如何解决这种跨域问题呢，我们主要由三个思路：

  1. jsonp
  2. cors
  3. 前端代理

这里主要给大家介绍第二个：cors

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

所以，服务器方面只要添加一个响应头，同意跨域请求，浏览器也就不再拦截：

response = JsonResponse(data)
response["Access-Control-Allow-Origin"] = "*"

image


2.cors
cors有两种请求：简单请求和非简单请求

只要同时满足以下两大条件,就属于简单的请求

（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。浏览器对这两种请求的处理，是不一样的。

简单请求:一次请求

非简单请求:两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

支持跨域,简单请求:

服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

支持跨域复杂请求:

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

cors在Django中的实现：

在返回结果中加入允许信息(简单请求):

def test(request):
    import json
    obj=HttpResponse(json.dumps({'name':'yuan'}))
    # obj['Access-Control-Allow-Origin']='*'
    obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'
    return obj

放到中间件中处理复杂和简单请求:

from django.utils.deprecation import MiddlewareMixin
class MyCorsMiddle(MiddlewareMixin):
    def process_response(self, request, response):
        # 简单请求:
        # 允许http://127.0.0.1:8001域向我发请求
        # ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'
        # 允许所有人向我发请求
        response['Access-Control-Allow-Origin'] = '*'
        if request.method == 'OPTIONS':
            # 所有的头信息都允许
            response['Access-Control-Allow-Headers'] = '*'
        return response

在settings中配置即可,在中间件中的位置可以随意放置.

也可以通过第三方组件：pip install django-cors-headers

# (1)
pip install django-cors-headers

# (2)
 INSTALLED_APPS = (
 'corsheaders',
)
  
# (3)
 1 MIDDLEWARE = [
 2     'django.middleware.security.SecurityMiddleware',
 3     'django.contrib.sessions.middleware.SessionMiddleware',
 4     'django.middleware.csrf.CsrfViewMiddleware',
 5     'django.contrib.auth.middleware.AuthenticationMiddleware',
 6     'django.contrib.messages.middleware.MessageMiddleware',
 7     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 8     'corsheaders.middleware.CorsMiddleware',  # 按顺序
 9     'django.middleware.common.CommonMiddleware',  # 按顺序
10 ]
  
  # 配置白名单
 1 CORS_ALLOW_CREDENTIALS = True#允许携带cookie
 2 CORS_ORIGIN_ALLOW_ALL = True
 3 CORS_ORIGIN_WHITELIST = ( '*')#跨域增加忽略
 4 CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', )
 5 #允许的请求头
 6 CORS_ALLOW_HEADERS = (
 7     'XMLHttpRequest',
 8     'X_FILENAME',
 9     'accept-encoding',
10     'authorization',
11     'content-type',
12     'dnt',
13     'origin',
14     'user-agent',
15     'x-csrftoken',
16     'x-requested-with',
17     'Pragma',
18 )

前端项目设置请求头记得添加到CORS_ALLOW_HEADERS


4 基于jquery的Ajax实现

方式1：

<button class="send_Ajax">send_Ajax</button>
<script>
       $(".send_Ajax").click(function(){
           $.ajax({
               url:"/handle_Ajax/", //请求的url
             		//（如果不加地址和端口，默认为当前的地址和端口在拼接handle_Ajax
               type:"POST",  //请求的方式，"get","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：

class BaseResponse(object):
    def __init__(self, status=False, detail=None, data=None):
        self.status = status
        self.detail = detail
        self.data = data

    @property
    def dict(self):
        return self.__dict__

def sms_send(request):
    res = BaseResponse()
    # 校验数据的合法性：手机号的格式 + 角色
    request.POST.get('mobile')
    form = MobileForm(request.POST)
    if not form.is_valid():
        # print(form.errors)  # <ul class="errorlist"><li>mobile<ul class="errorlist"><li>手机号格式错误</li></ul></li></ul>
        # print(form.errors.as_json())  # {"mobile": [{"message": "\u8fd9\u4e2a\u5b57\u6bb5\u662f\u5fc5\u586b\u9879\u3002", "code": "required"}]}
        # print(form.errors.as_data())  # {'mobile': [ValidationError(['这个字段是必填项。'])]}
        res.detail = form.errors
        return JsonResponse(res.dict, json_dumps_params={"ensure_ascii": False})

    res.status = True
    return JsonResponse(res.dict)

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

	// 1.获取手机号和角色，向后台发送请求
	// 清楚所有的错误
	$('.error_message').empty();

	$.ajax({
		url: "{% url 'sms_send' %}",
		type: "POST",
		data: {mobile: $("#id_mobile").val(), role: $("#id_role").val()},
		dataType: "JSON",  // 后端返回数据，转换成对象，可直接调用
		success: function (res) {
			if (res.status) {
				// 2.动态效果
				sendSmsRemind();
			} else {
				// {"status": false, "detail": {"mobile": ["这个字段是必填项。"]}}
				$.each(res.detail, function (k, v) {
					$("#id_" + k).next().text(v[0]);
				})
			}
		}
	})

})

5 Ajax的数据传输

事先注销掉，settings.py 下的ajax安全

# 'django.middleware.csrf.CsrfViewMiddleware',

urls.py:

from app01 import views
urlpatterns = [
    path('cal/', views.cal),
]

views.py:

def cal(request):
    # print(request.POST)
    n1 = int(request.POST.get("n1"))
    n2 = int(request.POST.get("n2"))

    ret = n1+n2

    return HttpResponse(ret)

templates文件下的，index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">计算</button>

<script>
//Ajax计算求值
$(".cal").click(function () {
    $.ajax({
        url:"/cal/",
        type: "post",
        data: {
            "n1":$("#num1").val(),
            "n2":$("#num2").val(),
        },
        success:function (data) {
            {#console.log(data);#}
            $("#ret").val(data)
        }
    })
})
</script>
</body>
</html>

6 基于Ajax的登陆验证

models.py:

from django.db import models

# Create your models here.

class User(models.Model):
    name = models.CharField(max_length=32)
    pwd = models.CharField(max_length=32)

image

urls.py:

from app01 import views
urlpatterns = [
    path('login/', views.login),
]

views.py:

from app01.models import User
def login(request):
    print(request.POST)
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")

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

    res = {"user":None, "msg":None}
    if user_obj:
        res['user'] = user_obj.name
    else:
        res['msg'] = "username or password wrong"

    import json
    return HttpResponse(json.dumps(res))

templates文件下的，index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form>
    用户名：<input type="text" id="user">
    密码：<input type="password" id="pwd">
    <input type="button" value="submit" class="login_btn"><span class="error"></span>
</form>
<script>
//登录验证
$(".login_btn").click(function () {
    $.ajax({
        url: "/login/",
        type: "post",
        data: {
            "user": $('#user').val(),
            "pwd": $('#pwd').val()
        },
        success: function (data) {
            //json 反序列化
            var datas = JSON.parse(data) //反序列化 object{}
            if (datas.user){
                location.href="http://www.baidu.com"
            }
            else {
                $(".error").html(datas.msg).css({"color": "red","margin-left":"10px"})
            }
        }
    })
})
</script>
</body>
</html>

6-1 ajax同源策略

<form>
    {% csrf_token %}
    <input ... />
    <input type='submit' />
</form>

浏览器打开网址时，django在cookie中也给我们返回了一段值。

$.ajax({
	url:"...",
	type:"get"
	data:{user:"wupeiqi",pwd:"xxxx"}，
	header:{
		"X-HTTP...":"cookie中写的那段值"
	},
	success:function(arg){
		
	}
})

6-2 应用使用案例

    function bindSendSmsEvent() {
        $('#sendBtn').click(function () {
            // 1.获取手机号，想后台发送请求

            $.ajax({
                url: '{% url 'sms_send' %}',
                type: 'POST',
                data: {mobile: '18888'},
                headers: {
                    'X-CSRFTOKEN': getCookie('csrftoken'),
                    'xxx-123'：'123'
                },
                success: function (res){
                    console.log(res);
                }
            })
            // 2.动态效果
            //sendSmsRemind();
        })
    }

后端获取时：

print(request.META.get('HTTP_X_CSRFTOKEN'))
print(request.META.get('HTTP_XXX_123'))

因为js中通过.来获取cookie值，那么django给我们提供了一种解决方案：

    // 根据cookie的name获取对应的值
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

那么问题就来了，如果每次都要携带请求头，每次都需要手动写。会很麻烦。所有jquery提供一种方法

    function csrfSafeMethod(method) {
        return (/^(GET|HFAD|OPTIONS|TRACE)$/.test(method))
    }

    function bindSendSmsEvent() {
        // 每当发送一次ajax之前都会发送beforeSend方法
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type)) {
                    xhr.setRequestHeader('X-CSRFTOKEN', getCookie('csrftoken'))
                }
            }
        })
        
        $('#sendBtn').click(function () {
            // 1.获取手机号，想后台发送请求

            $.ajax({
                url: '{% url 'sms_send' %}',
                type: 'POST',
                data: {mobile: '18888'},
                success: function (res){
                    console.log(res);
                }
            })
            // 2.动态效果
            //sendSmsRemind();
        })
    }

如果想更方便的使用:
csrf.js

// 根据cookie的name获取对应的值
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function csrfSafeMethod(method) {
    return (/^(GET|HFAD|OPTIONS|TRACE)$/.test(method))
}

// 每当发送一次ajax之前都会发送beforeSend方法
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type)) {
            xhr.setRequestHeader('X-CSRFTOKEN', getCookie('csrftoken'))
        }
    }
})

login.html

<script src="{% static 'js/csrf.js' %}"></script>
<script>
    $(function () {
        // 当页面框架加载完成之后，自动执行里面的代码
        bindSendSmsEvent();
    })

    function bindSendSmsEvent() {
        $('#sendBtn').click(function () {
            // 1.获取手机号，想后台发送请求
            $.ajax({
                url: '{% url 'sms_send' %}',
                type: 'POST',
                data: {mobile: '18888'},
                success: function (res){
                    console.log(res);
                }
            })
        })
    }
</script>

6-3 ajax的json转换

    function bindSendSmsEvent() {
        $('#sendBtn').click(function () {
            // 1.获取手机号，想后台发送请求
            let mobileData = $('#id_mobile').val()
            $.ajax({
                url: '{% url 'sms_send' %}',
                type: 'POST',
                data: {mobile: mobileData},
                dataType: "JSON",
                success: function (res){
                    console.log(res);
                    if (res.status) {

                    }else{
                        
                    }
                }
            })
        })
    }

7 jquery的json转换

JSON.stringify(data)：序列化

JSON.parse(data)：反序列化


8 文件上传

8-1 请求头ContentType

1、在form表单中默认为：enctype="application/x-www-form-urlencoded"

请求头ContentType决定这个数据用什么编码发送数据

image

如果是urlencoded的请求头，那么它的的数据是如下方式发送：

请求体（a=1&b=2&c=3）

上传键值对的时候使用

2、form表单中请求头为：enctype="multipart/form-data"

文件的传输方式，上传文件使用


8-2 基于Form表单的文件上传

urls.py:

from app01 import views
urlpatterns = [
    path('file_put/', views.file_put),
]

views.py:

print(request.FILES) # 文件存在这个FILES对象中;中有name属性，可取出文件名字

上传的文件默认存储在项目根目录下

def file_put(request):
    
    # print(request.body)   # 原始的请求体数据
    # print(request.GET)    # GET请求数据
    # print(request.POST)   # POST请求数据
    # print(request.FILES)  # 上传的文件数据
    
    if request.method=="POST":
        print(request.POST)
        print(request.FILES) # 上传的文件数据

        file_obj = request.FILES.get("avatar") # 中有name属性，可取出文件名字
        
        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")

file_put.html:

form属性中添加enctype="multipart/form-data"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>基于form表单的文件上传</h3>
<form action="" method="post" enctype="multipart/form-data">
    用户名：<input type="text" name="user">
    头像：<input type="file" name="avatar">
    <input type="submit">
</form>
</body>
</html>

8-3 基于Ajax的健值上传

urls.py:

from app01 import views
urlpatterns = [
    path('file_put/', views.file_put),
]

views.py:

def file_put(request):
    # print(request.body)   # 原始的请求体数据（json字符串在其中）
    # print(request.GET)    # GET请求数据
    # print(request.POST)   # POST请求数据（urlencoded格式的数据）
    # print(request.FILES)  # 上传的文件数据（form-data格式的数据）

    if request.method=="POST":
        print(request.POST)
        print(request.body) # 请求报文 b'{"a":1,"b":2}'

        return HttpResponse("ok")
        
    return render(request, "file_put.html")

file_put.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>

<h3>基于Ajax文件上传</h3>
<form action="" method="post">
    用户名：<input type="text" name="user">

    <input type="button" class="btn" value="Ajax">
</form>

<script>
  	// ajax的健值上传
    // 默认都是 application/x-www-form-urlencoded 格式
    $('.btn').click(function () {
        $.ajax({
            url: "", //什么都不加，默认走当前的路径
            type: "post",
            data: {
                a:1,
                b:2,
            },
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>
</body>
</html>

8-4 ajax的json格式数据发送

<script>
    // ajax的json格式上传
    $('.btn').click(function () {
        $.ajax({
            url: "", //什么都不加，默认走当前的路径
            type: "post",
            contentType: "application/json",
            data: JSON.stringify({
                a:1,
                b:2,
            }),
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>

8-5 基于Ajax的文件上传

urls.py:

from app01 import views
urlpatterns = [
    path('file_put/', views.file_put),
]

Views.py:

def file_put(request):

    if request.method=="POST":
        print(request.POST)
        print(request.FILES) # 文件存在这个FILES对象中

        file_obj = request.FILES.get("avatar") # 中有name属性，可取出文件名字

        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")

File_put.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<h3>基于Ajax文件上传</h3>
<form action="" method="post">
    用户名：<input type="text" id="user">
    头像：<input type="file" id="avatar">
    <input type="button" class="btn" value="Ajax">
</form>

<script>
    //ajax的文件上传
    //$("#avatar")[0].files[0] 取到上传的文件
    $('.btn').click(function () {
        var form_data = new FormData();
        form_data.append("user", $("#user").val());
        form_data.append("avatar", $("#avatar")[0].files[0]);

        $.ajax({
            url: "", //什么都不加，默认走当前的路径
            type: "post",
            contentType: false, //不做任何编码
            processData: false,
            data: form_data,
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>
</body>
</html>
posted @ 2022-08-11 10:11  角角边  Views(76)  Comments(0)    收藏  举报