介绍
Ajax
Ajax（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
Ajax除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）。因此使用ajax的主要特点有如下几点：（1）Ajax使用Javascript技术向服务器发送异步请求；（2）Ajax无须刷新整个页面；（3）因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高。在django入门项目中我们已经简单的介绍了一下ajax应用。下面我们将做详细介绍。
Ajax的优缺点
优点：
Ajax使用JavaScript技术向服务器发送异步请求;
Ajax无须刷新整个页面，提高用户的体验度
因为服务器响应内容不再是整个页面，而是页面中的局部，所以Ajax性能高
关于AJAX的例子
ajax实现方式（无参数）
具体实现方式实例如下（完成一次ajax请求，且完成了一个局部刷新）：
html文件部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<h3>INDEX</h3>
<button class="s1">send_ajax</button>
<p class="name"></p>
<script>
// ajax的无参请求
$(".s1").click(function () {
// 触发ajax事件
$.ajax({
url: "/ajax_handle/",
type: "get",
success: function (data) { {# data相当于服务端拿过来的"黎诗"的数据 #}
{# 当某一个事件完成之后，固定执行另外一个函数 #}
{# 在这里success也相当于一个回调函数， 当我们请求过去，到达服务器，服务器响应过来return HttpResponse("黎诗")，这里success开始工作 ，把数据响应到客户端 这样就是完整的过程 #}
console.log(data);
{# 完成一次ajax请求，且完成了一个局部刷新#}
$(".name").html(data) {# 把一个data字符串赋到一个文本上 #}
}
})
});
</script>
</body>
</html>
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
return render(request,"index.html")
def ajax_handle(request):
return HttpResponse("黎诗")
Views.py
url(r‘^index/‘, views.index), # index(request) 必须需传一个参数
url(r‘^ajax_handle/‘, views.ajax_handle), # index(request)
urls。py
关于AJAX的有参操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" id="n1">+<input type="text" id="n2">=<input type="text" id="sum">
{#为什么不需要name标签：form表单的作用，点submit的按钮,自动绑定事件，以name,ajax,是我们直接拼键值对了，我们写的是什么，他就是什么#}
<button class="count">计算</button>
<script>
// ajax的有参请求
//绑定点击事件
$(".count").click(function () {
//触发ajax请求
$.ajax({
url:"/count/",
{# data-->指定你要放的参数#}
data:{"num1":$("#n1").val(),"num2":$("#n2").val()},
{# 这里写的都是JavaScript代码,与Python无关，不是字典,是基于js的数据类型，obj类型#}
{# 这里加键值对#}
success:function (data) {
console.log(data);
$("#sum").val(data)
}
})
})
</script>
</body>
</html>
def count(request):
num1 = request.GET.get("num1")
num2 = request.GET.get("num2")
ret = int(num1)+int(num2)
return HttpResponse(str(ret))
逻辑处理views.py
注意点
data里面的类型须是符合序列化字符串
校验用户注册信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>
{% csrf_token %}
<h4>校验用户是否存在</h4>
<input type="text" id="user"><span></span>
<script>
//校验注册信息
$("#user").blur(function () {
$.ajax({
url: "/jiaoyan_user/",
type: "post",
data: {
"user": $("#user").val(),
"csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val()},
success: function (data) {
console.log(data);
var data = JSON.parse(data);
{# 反序列化为字典#}
if (data.is_reg) {
$("#user").next().html("该用户已注册").css("color","red");
{# 当注册，添加错误信息，#}
}
}
})
})
</script>
</body>
</html>
def jiaoyan_user(request):
response={"is_reg":True}
user=request.POST.get("user")
# == 表示在数据库里有
if user == "jassin":
pass
else:
response["is_reg"] = False
import json
# 返回到页面，要序列化成字符串
return HttpResponse(json.dumps(response))
Views.py
url(r‘^jiaoyan_user/‘, views.jiaoyan_user), # index(request)
urls.py
注意点
关于csrf错误
原文地址：https://www.cnblogs.com/jassin-du/p/8386926.html
时间： 2024-08-30 00:53:34