django ajax案例,AJAX入门学习-2：基于JS的AJAX实现(以Django为例)

-------谢谢您的参考，如有疑问，欢迎交流

一. ajax的实现操作流程

实例对象：

var xmlhttp = XMLHttprequest()

连接server端：

xmlhttp.open("")

发送数据：

xmlhttp.send("") # 请求体的内容 ，如果是GET请求就没有内容，内容在URL里面，写为send(null)

监听：

xmlhttp(if == 4:{var context = xmlhttp.responsetext}) # 判断服务器是否响应结束，其中4状态表示服务器响应结束

二. ajax第一样例，发送get请求

2.1 django的urls.py

from django.contrib import admin

from django.urls import path

from django.conf.urls import url

from ajax import views

urlpatterns = [

path('admin/', admin.site.urls),

url(r'^index',views.index),

url(r'ajax_receive',views.ajax_receive),

]

2.2 django的views.py

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(req):

return render(req,"index.html")

def ajax_receive(req):

return HttpResponse("hello")

2.3 模板文件 index.html

Title

ajax提交

// 生成一个xml对象

function createXMLHttpRequest() {

var xmlHttp;

// 适用于大多数浏览器，以及IE7和IE更高版本

try {

xmlHttp = new XMLHttpRequest();

} catch (e) {

//适用于IE6

try {

xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");

} catch (e) {

//适用于IE5.5，以及IE更早版本

try {

xmlHttp = new ActiveXObject(("Microsoft.XMLHTTP"));

} catch (e) {}

}

}

return xmlHttp;

}

// 实例化对象，打开连接，发送数据，返回数据

function func1 () {

//step1

var xmlhttp = createXMLHttpRequest() // 实例对象

//step2

xmlhttp.open("GET","/ajax_receive",true) // 参数1：请求方式；参数二：请求接口；参数三：采用异步

//step3

xmlhttp.send(null); // 发送数据

//step4

xmlhttp.onreadystatechange=function () {

if ( xmlhttp.readyState == 4 && xmlhttp.status == 200){

// alert(xmlhttp.status) //返回HTTP码状态

// alert(xmlhttp.readyState) //返服务器响应状态，4位响应结束

var data = xmlhttp.responseText

alert(data)

}

}

}

三. ajax第二样例，发送post请求

3.1 django的urls.py

from django.contrib import admin

from django.urls import path

from django.conf.urls import url

from ajax import views

urlpatterns = [

path('admin/', admin.site.urls),

url(r'^index',views.index),

url(r'ajax_receive',views.ajax_receive),

]

3.2 django的views.py

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(req):

return render(req,"index.html")

def ajax_receive(req):

if req.method == "POST":

print("req.POST",req.POST)

return HttpResponse("hello2")

3.3 模板文件 index.html

Title

ajax提交

// 生成一个xml对象

function createXMLHttpRequest() {

var xmlHttp;

// 适用于大多数浏览器，以及IE7和IE更高版本

try {

xmlHttp = new XMLHttpRequest();

} catch (e) {

//适用于IE6

try {

xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");

} catch (e) {

//适用于IE5.5，以及IE更早版本

try {

xmlHttp = new ActiveXObject(("Microsoft.XMLHTTP"));

} catch (e) {}

}

}

return xmlHttp;

}

// 实例化对象，打开连接，发送数据，返回数据

function func1 () {

//step1

var xmlhttp = createXMLHttpRequest(); // 实例对象

//step2

xmlhttp.open("POST","/ajax_receive",true); // 参数1：请求方式；参数二：请求接口；参数三：采用异步

// POST方法需要设置一个请求头,如果不设置请求头，Web容器会忽略请求体的内容

// POST方法需要设置请求头，是因为要提交的数据需要放在请求体里面

// GET方法不需要是因为GET提交的主体是空的

// 必须放在send之前，open之后，固定的POST参数

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//step3

// xmlhttp.send(null); // 发送数据

xmlhttp.send("name=dashan"); //POST向后台提交数据

//step4

xmlhttp.onreadystatechange=function () {

if ( xmlhttp.readyState == 4 && xmlhttp.status == 200){

// alert(xmlhttp.status) //返回HTTP码状态

// alert(xmlhttp.readyState) //返服务器响应状态，4位响应结束

var data = xmlhttp.responseText;

alert(data)

}

}

}

3.4 GET与POST的不同

3.4.1 open方法改为了POST

3.4.2 需要提交的数据写到send里面

3.4.3 因为POST的Request体是有数据的，所以必须设置请求头

四. AJAX第三例(实现用户名是否已注册)

4.1 功能介绍

在注册表单中，当用户填写了用户名后，把光标移开，会自动向服务器发送异步请求，服务器返回TRUE或False，

返回true表示这个用户已经被注册过，返回false表示没有注册过

客户端得到服务器返回的结果后，确定是否在用户名文本框后显示"用户名已被注册"的错误信息！

4.2 案例分析

- 页面中给出注册表单

- 在username表单字段中添加onblur事件，调用send()方法

- send()方法获取username表单字段的内容，向服务器发送异步请求，参数为username

- django的视图函数：获取username参数，判断是否为"yuan"，如果是响应true，否则响应false

4.3 代码

4.3.1 django的urls.py

from django.contrib import admin

from django.urls import path

from django.conf.urls import url

from ajax import views

urlpatterns = [

path('admin/', admin.site.urls),

url(r'ajax_register',views.ajax_register),

]

4.3.2 django的views.py

from django.shortcuts import render,HttpResponse

# Create your views here.

def ajax_register(req):

if req.method == "POST":

username = req.POST.get("username")

if username == "dashan":

return HttpResponse("true")

return HttpResponse("false")

return render(req,"register.html")

4.3.3 模板文件 register.html

Title

用户名：

密码：

function createXMLHttpRequest() {

var xmlHttp;

// 适用于大多数浏览器，以及IE7和IE更高版本

try {

xmlHttp = new XMLHttpRequest();

} catch (e) {

//适用于IE6

try {

xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");

} catch (e) {

//适用于IE5.5，以及IE更早版本

try {

xmlHttp = new ActiveXObject(("Microsoft.XMLHTTP"));

} catch (e) {}

}

}

return xmlHttp;

}

function func1(self) {

var username = self.value;

var xmlhttp = createXMLHttpRequest();

xmlhttp.open("POST","/ajax_register",true);

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlhttp.send("username="+username); // 如果是变量的话，必须这样写，等于号在双引号里面

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4 && xmlhttp.status==200){

var s = xmlhttp.responseText

if (s == "true"){

document.getElementById("error").innerHTML="用户名已存在"

}

}

}

}