小生博客: http://xsboke.blog.51cto.com
如果有疑问, 请点击此处, 然后发表评论交流, 作者会及时回复.
------- 谢谢您的参考, 如有疑问, 欢迎交流
一. 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
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <button onclick="func1();">
- Ajax 提交
- </button>
- <script>
- // 生成一个 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)
- }
- }
- }
- </script>
- </body>
- </HTML>
三. 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
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <button onclick="func1();">
- Ajax 提交
- </button>
- <!-- ajax 和 form 都是和后端进行数据交互的, form 的 enctype 和 ajax 设置请求头是一个道理, 但是 form
- 是默认就有这个请求头的, 所以我们在写 form 的时候不用特意指定请求头 -->
- <form action="//" method="post" enctype="application/x-www-form-urlencoded">
- <input type="text">
- <input type="text">
- </form>
- <script>
- // 生成一个 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)
- }
- }
- }
- </script>
- </body>
- </HTML>
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
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- </head>
- <body>
- <form>
- <p>
- 用户名:
- <input type="text" name="username" onblur="func1(this);">
- </p>
- <span id="error">
- </span>
- <p>
- 密码:
- <input type="password" name="passwd">
- </p>
- <input type="submit" value="提交">
- </form>
- <script>
- 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 = "用户名已存在"
- }
- }
- }
- }
- </script>
- </body>
- </HTML>
来源: http://blog.51cto.com/xsboke/2350451