功能
不刷新頁面也能完成前後端的溝通。
- HTML + PHP + MySQL ：必須刷新頁面
- HTMP + Ajax + PHP + MySQL：不必刷新頁面
以 Facebook 的按讚功能為例
使用者按讚→資料庫更新讚數→網頁顯示讚數+1
透過 Ajax 的輔助，這一連串的動作都可以不刷新網頁而達成。
使用者不必中斷滑到一半的閱讀體驗。
結構
範例
前端
//HTTP Method
form(method="POST")
input(type="text" placeholder="email")
input(type="password" placeholder="password")
input(type="submit")
p
const email=document.querySelectorAll("input")[0];
const password=document.querySelectorAll("input")[1];
const submit=document.querySelectorAll("input")[2];
const alert=document.querySelector("p");
submit.addEventListener("click", function(e){
//clear submit default
e.preventDefault();
$.ajax({
type: "POST",//對應 form 的 method
url: "insert.php",//指定 php 檔案
data: {
//要傳送的值。php超全域變數: js變數
email: email.value,
password: password.value
},
//若傳送成功
success: function(re){
//若php回應值=="success"
if(re=="success"){
alert.textContent="register successful"
}else{
alert.textContent="register fail"
}
}
});
})
後端
+----------+------+-----+---------------+
| Field | Type | Key | Extra |
+----------+------+-----+---------------+
| ID | int | PRI | auto_increment|
| email | text | | |
| password | text | | |
+----------+------+-----+---------------+
<?php
mysql_connect("localhost", "root", "");//MySQL連線
mysql_select_db("register");//選擇資料庫
//$_POST['email']與$_POST['password']是ajax定義好的超全域變數
//防止隱碼注入攻擊
$_POST['email']=mysql_escape_string($_POST['email']);
$_POST['password']=mysql_escape_string($_POST['password']);
//帳號與密碼寫入資料庫
$save=mysql_query("INSERT INTO member (email, password) VALUES('$_POST[email]','$_POST[password]')");
if(!$save){
echo "fail";//若寫入失敗回傳fail
}else{
echo "success";//成功則回傳success
}
?>
