溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小生博客：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="http://" 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，否則響應false4.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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
