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
- 简单请求
