这篇文章主要讲一下$.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);