Django ajax 简单介绍
程序员文章站
2022-06-24 11:28:35
AJAX Asynchronous Javascript And XML是 "异步Javascript和XML"。即使用 Javascript 语言与服务器进行异步交互，传输的数据为XML。 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求； 异步交互：客户端发出一个请求 ......
ajax
asynchronous javascript and xml是 "异步javascript和xml"。即使用 javascript 语言与服务器进行异步交互，传输的数据为xml。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
优点：
ajax使用javascript技术向服务器发送异步请求；
ajax无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的局部，所以ajax性能高；
缺点：
ajax并不适合所有场景，很多时候还是要使用同步交互；
ajax虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为ajax是在浏览器中使用javascript技术完成的，所以还需要处理浏览器兼容性问题；
ajax 发送get请求
创建一个 ajax_lesson 项目 和 app01 应用
修改 urls.py 文件
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index),
path('ajax_receive/', views.ajax_receive),
]
在 tempates 文件夹中添加 index.html 文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<button onclick="func1()">ajax提交</button>
</body>
<script>
function createxmlhttprequest() {
var xmlhttp;
try{
xmlhttp = new xmlhttprequest();
} catch (e) {
try {
// 适用于ie6
xmlhttp = new activexobject("msxml2.xmlhttp");
}catch (e) {
try {
// 适用于ie5.5，以及ie更早版本
xmlhttp = new activexobject("microsoft.xmlhttp");
}catch (e) {
}
}
}
return xmlhttp;
}
function func1() {
var xmlhttp = createxmlhttprequest()
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readystate == 4 && xmlhttp.status == 200){
var data = xmlhttp.responsetext;
alert(data);
}
}
xmlhttp.open("get", "/ajax_receive/", true);
xmlhttp.send(null);
}
</script>
</html>
在 views.py 上修改
from django.http import httpresponse
from django.shortcuts import render
# create your views here.
def index(request):
return render(request,'index.html')
def ajax_receive(request):
print('ok')
return httpresponse("hello world2")
ajax 发送post请求
修改 index.html 文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<button onclick="func1()">ajax提交</button>
</body>
<script>
function createxmlhttprequest() {
var xmlhttp;
try{
xmlhttp = new xmlhttprequest();
} catch (e) {
try {
// 适用于ie6
xmlhttp = new activexobject("msxml2.xmlhttp");
}catch (e) {
try {
// 适用于ie5.5，以及ie更早版本
xmlhttp = new activexobject("microsoft.xmlhttp");
}catch (e) {
}
}
}
return xmlhttp;
}
function func1() {
var xmlhttp = createxmlhttprequest()
xmlhttp.open("post", "/ajax_receive/", true);
xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=klvchen");
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readystate == 4 && xmlhttp.status == 200){
var data = xmlhttp.responsetext;
alert(data);
}
}
}
</script>
</html>
修改 views.py 文件
from django.http import httpresponse
from django.shortcuts import render
# create your views here.
def index(request):
return render(request,'index.html')
def ajax_receive(request):
if request.method=="post":
print("req.post", request.post)
return httpresponse("hello world2")
在 settings.py 文件中注释
#'django.middleware.csrf.csrfviewmiddleware',