Ajax请求

介绍
局部刷新案例
异步
同源策略

介绍

Ajax请求两大特点和优点异步、局部刷新 bootcdn 中文文档在这个地址可以获jquery

局部刷新案例

模版

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

    <style>
        .err{
            color: red;
        }
    </style>

</head>
<body>
<h3>注册页面</h3>
<form action="">
    <p>用户名 <input type="text" class="user"> <span class="err"></span></p>

</form>
<script>
    // 定义一个匿名函数 绑定一个时间 失去焦点 触发该匿名函数
    $(".user").blur(
        function () {
            // 基于jquery发送Ajax请求
            $.ajax({
                // 可以是绝对路径 也可以是相对路径
                url: "/app01/username_auth/",
                 // 请求方法
                type:"post",
                 // 请求数据
                data: {
                    "user":$(".user").val()
                },
                // 发起Ajax请求成功后 响应回来的时候会触发该匿名函数
                success: function(res) {
                    // 通过dom操作 将返回的数据渲染到局部页面

                    if (res.exist) {
                        $(".err").html(res.msg)
                    }
                    else {
                        $(".err").html("")
                    }
                },

                error: function(err) {

                }

            })
        }
    )


</script>

</body>
</html>

视图

def user_auth(request):

    user = request.POST.dict()["user"]
    select_user = User.objects.filter(name=user)
    res ={"exist":False,"msg":""}
    if select_user:
        res["exist"] = True
        res["msg"] = "用户已存在"

    return JsonResponse(res)

异步

比如说视图有个强制等待10秒浏览器地址栏请求就要一值在哪等 Ajax请求他是不会影响其他操作触发请求后不影响操作其他的

同源策略

同源策略是浏览的策略导致的，同源策略他是一种约定他是浏览器最核心最基本的安全功能如果缺少同源策略它可能会影响正常功能的使用同源是指域名、协议、端口相同，当请求完成后服务器返回的时候浏览器会做判断发起的Ajax请求域名、协议、端口是否和地址栏的域名、协议、端口相同如果相同这就是同源就饿没有问题，如果不是就是不同源就会报错被限制拦截

解决同源问题主要三方法
- jsonp
- cors
- 前端代理

cors解决方法

简单请求

      res = JsonResponse(res)
      res["Access-Control-Allow-Origin"] = "*"  # 在返回的时候加上 Access-Control-Allow-Origin *的意思就是所有的ip都可以 浏览器不做拦截 如果指定ip将IP替换*即可
      return res