27.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ post請求,彈出返回的數據對象</title>
<script type="text/javascript" src='./js/jquery.js'></script>
</head>
<body>
<form action="">
<p>用戶名:<input type="text" name="u" /></p>
<p>密碼:<input type="text" name="p" /></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
<script type="text/javascript">
$('form').submit(function(){
var data = { //準備好要傳的值, 用json格式
'u' : $('input[name="u"]').val(), //獲取input裏的用戶名裏
'p' : $('input[name="p"]').val() //獲取input裏的密碼
};
$.post('27.php' , data , function(res){ //發送post請求,data是要傳的數據,res接收傳回來的值
alert(res); //彈出接收回來的值
});
return false; //sublit綁定事件必需寫,這然頁面就會刷新了
});
</script>
</html>
-----------------------------------------
27.php中:
<?php
print_r($_POST); // 27.html打印出來POST傳傳過來的數據
?>
----------------------------------------------------------------------------------------------------------------------------------------------
26.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ get請求驗證用戶名</title>
<script type="text/javascript" src='./js/jquery.js'></script>
</head>
<body>
<input type="text" name="username" value=""><span id=reg></span>
</body>
<script type="text/javascript">
$('input:text').blur(function(){ //綁定blur表單聚焦事件
var url= '26.php?un='+$('input').val(); //準備要地址裏要傳的數據
//console.log(url);
$.get(url,function(res){
if(res=='1'){ //判斷res接收回來的值,如果等於,就是已經佔用,否則用戶名可以使用,
$('#reg').html('<font color="red">用戶名已被佔用</font>');
}else{
$('#reg').html('<font color="geen">可以使用</font>');
}
});
});
</script>
</html>
-------------------------------------------------
26.php:
<?php
$un=$_GET['un'];
echo in_array($un,array('zhangsan','lisi','wangwu'))?1:0; //如果傳來的值在數組中就返回1,否則返回0
?>
