表單提交的兩種方式區別
1 submit提交表單會刷新頁面，頁面將跳轉到你提交的那個頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 style="color:red">submit提交表單會刷新頁面，頁面將跳轉到你提交的那個頁面</h1>
<form action="22.php" method="post">
姓名：<input type="text" name = "name">
密碼：<input type="password" name = "password">
<input type="submit" value="提交">
</form>
</body>
</html>
-------------------分割線----------------------------------
2 ajax提交只是頁面的局部刷新不會跳轉到你提交的那個頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1 style="color:red">ajax提交只是頁面的局部刷新不會跳轉到你提交的那個頁面</h1>
<form id = "formdata">
姓名：<input type="text" name = "name" id = "name">
密碼：<input type="password" name = "password" id = "password">
<input type="button" value="提交" id="btn">
</form>
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// 一次性獲得表單數據
var formData = $("#formdata").serialize();
$.ajax({
url: '22.php',
type: 'post',
data: formData,
// 提交之前校驗數據
beforeSend:function(){
if($('#name').val() == ''){
alert("用戶名不能為空");
return false;
}
},
success:function(data){
// 查看php返回來的數據格式
console.log(typeof data);
// 將字符串轉成對象我們想要的格式
data = JSON.parse(data);
console.log(data);
if(data.code == 1){
alert(data.msg);
// 登錄成功后跳轉到另一個頁面
location.href = "08ajaxtempletechat.html";
}else{
alert(data.msg);
}
}
})
});
})
</script>
</body>
</html>
--------------------php-------------------
php
<?php
header('Content-type:text/html;charset = utf-8');
//接受用戶傳來的數據
$name = $_POST['name'];
$pass = $_POST['password'];
//模擬從數據庫查詢的用戶名數據
$users = array(
'admin' => 123,
'xiaoli' => 456
);
//檢測用戶輸入進來的用戶名在數據庫中是否存在
$hasname = array_key_exists($name, $users);
//用戶輸入的名字在數據庫中存在並且數據庫中已有的密碼跟用戶輸進去的一致
if($hasname && $users[$name] == $pass){
$result = array(
'code' => 1,
'msg' => "登錄成功"
);
echo json_encode($result);
}else{
$result = array(
'code' => 0,
'msg' => "登錄失敗"
);
echo json_encode($result);
}
?>