這篇文章主要講一下$.post方法來實現ajax
登陸頁面代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<title>login</title>
</head>
<body>
<form action="login.php" method="post">
登錄名：<input type="text" name="username">
<div id="massage"></div>
密碼：<input type="password" name="password">
<input type="submit" value="提交">
<a href="register.html">注冊</a>
</form>
<script type="text/javascript">
$(function(){
$(':input[name="username"]').change(function() {
txt=$(':input[name="username"]').val();
$.post("ajax.php",{username:txt},function(result){
$("#massage").html(result);
});
});
});
</script>
</body>
</html>
ajax.php頁面的代碼
<?php
$mysqli = new mysqli('localhost', 'root', '', 'java');
if($username=$_POST['username']){
$result = $mysqli->query("SELECT * FROM user WHERE username="."'$username'");
$rs1=$result->fetch_row();
if($rs1){
$arr = "<font color='red'>用戶已經存在</font>";
echo $arr;
}
else{
$arr = "<font color='green'>此用戶可用</font>";
echo $arr;
}
}
register頁面代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<title>register</title>
</head>
<body>
<form action="register.php" method="post">
登錄名：<input type="text" name="username">
<div id="massage"></div>
密碼：<input type="password" name="password">
重復密碼：<input type="password" name="password2">
<div id="massage1"></div>
<input type="submit" value="提交">
<a href="index.html">登陸</a>
</form>
<script type="text/javascript">
$(function(){
$(':input[name="username"]').change(function() {
txt=$(':input[name="username"]').val();
$.post("ajax.php",{username:txt},function(result){
$("#massage").html(result);
});
});
$(':input[name="password2"]').change(function() {
txtpass=$(':input[name="password"]').val();
txtpass2=$(':input[name="password2"]').val();
if(txtpass&&txtpass2){
$.post("regajax.php",{password:txtpass,password2:txtpass2},function(result){
$("#massage1").html(result);
});
}
});
$(':input[name="password"]').change(function() {
txtpass=$(':input[name="password"]').val();
txtpass2=$(':input[name="password2"]').val();
if(txtpass&&txtpass2){
$.post("regajax.php",{password:txtpass,password2:txtpass2},function(result){
$("#massage1").html(result);
});
}
});
});
</script>
</body>
</html>
regajax.php代碼
<?php
if($_POST['password']){
if($_POST['password2']){
if($_POST['password']!=$_POST['password2']){
$arr = "<font color='red'>兩次密碼輸入不一致</font>";
echo $arr;
}
}
}
以上是代碼部分
需要注意的幾點是
//事件觸發執行的代碼放在一個空的$(function(){});中
1.$(function(){
$(':input[name="username"]').change(function() {
txt=$(':input[name="username"]').val();
$.post("ajax.php",{username:txt},function(result){
$("#massage").html(result);
});
});
});
2.
$(':input[name="username"]').change 這是某一標簽的某一個name屬性的表示方式
3. $.post(發送到的地址,發送的參數{key：values，key2：values2}，回調函數function(隨便用一個參數表示返回的數據){返回數據之後執行的函數語句})
4.$arr = "<font color='green'>此用戶可用</font>";
echo $arr;
返回HTML格式 直接echo就算是返回了
如果返回一個json格式的話，需要用 echo json_code($arr);
