我們在實際的開發過程中必定是有前后台數據交互 而現在只有兩種數據傳輸的方法一個是ajax和form表單提交
前后台數據傳輸，是非常重要的，一個頁面沒有前后台數據交互的話那也只是一個靜態頁面而已
在此之前我們打開文件的方式都是雙擊通過file協議，本地打開 一個文件
file:///C:/Users/John/Desktop/ajax1/1.html
像是這樣在本地打開的文件是沒有服務端所以我要使用xammp APP模擬一個服務端
這樣才可以更好的學習前后台的數據傳輸 xammp 集成了apache服務器，mysql數據庫，php服務端語言，集成的軟件
如何使用xammp 軟件
在安裝完成后
xammp服務存放的路徑：xammp安裝目錄中的htdocs文件夾，刪除里面所有的文件，這樣的話可以防止自己的文件被搞混淆。
在將自己想要打開的文件放入htdocs文件夾
然后下一步打開軟件
點擊Config按鈕 在點擊第一個Apache按鈕進入文本設置端口號
紅色的記號設置端口號盡量設置為3000以上的4位數這樣的話成功率高
怕有些端口被其他的軟件占用了導致失敗
都設置成功后點擊Starl按鈕生成環境成功
這里我設置的端口號是8888
接下使用端口號的進入方法來試試把
注意這里進入的網頁鏈接
http://ip地址:端口號/文件的路徑 這里我設置的端口號是8888
在看看我們在htdocs文件夾中放入自己的文件
注意這里瀏覽器只能識別html文件像上面CSS文件和js文件瀏覽器是識別不除來的
在搭建好了服務端環境后就可以學習接下來的前后台數據傳輸了
上面也說了有兩種方法
一種是Ajax Ajax也是現在主流的前后端數據交互的方法 當要局部刷新的時候，我們采用Ajax請求。
ajax的優點在於
1. 通過異步模式，提升了用戶體驗
2. 優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬占用
3. Ajax引擎在客戶端運行，承擔了一部分本來由服務器承擔的工作，從而減少了大用戶量下的服務器負載。
<body>
<h1>注冊賬號請輸入中文</h1>
用戶名
<input type="text" name="" id="input1">
<span class="deom"></span> //提示信息
<br>
<button>檢查用戶名是否可用</button>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script> //jq CDN
<script>
$("button").on("click", function() { //通過單擊擊的方式
$.ajax({ //啟動jq 的ajax的方法
type: "GET", //這里是傳輸的方法
url: "02.php", //這里是模仿服務端的后台文件地址
data: {
input1: $("#input1").val() //
},
success: function(data) { //data封裝的xhr.responseText
console.log(data) //服務端返回的數據
if (data == 1) { //通過返回的數據來判斷並且做出相應的行為
$(".deom").html("用戶名已經存在").css({
color: "red"
})
} else {
$(".deom").html("用戶名可以使用").css({
color: "springgreen"
})
}
},
error: function(xhr) {
console.log(xhr.status)
}
})
})
</script>
</body>
之前說過要模擬一個服務端出來所以這里使用PHP模仿
<?php // 定義一個數組，用來存儲用戶名，實際肯定是存在數據庫，從數據庫中去獲取 $db = ['蔡徐坤','香蕉君','邪劍仙']; // 參數，根據接口文檔來進行定義的 $uname = $_GET['input1']; // 首先假設沒有 $exists = false; // 循環判斷 foreach($db as $n){ if($n === $uname){ $exists = true; break; } } if($exists){ echo "1"; //1代表用戶名已經存在 }else{ echo "0"; //0代表用戶名可以使用 } ?>
現在進入頁面操作一下
以上是AJax的前后端數據代嗎可以綁定失去焦點事件
2.第二種form表單提交
<body>
<h1>通過form表單的提交方式完成前后端通信</h1>
<form action="02.php" method="GET"> //這里是GET提交方法
<input type="text" name="userName" placeholder="請輸入用戶名">//后台通過name屬性來獲取前台的數據
<br>
<input type="text" name="userPwd" placeholder="請輸入密碼">
<br>
<input type="submit">
</form>
</body>
使用form表單提交提交錯誤的話就整個頁面都會刷新 用戶填寫的信息都會消失所以不建議使用