正文
ajax讲解：“创建用户”和“用户登录”练习
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
ajax可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
接下来，将以例子的形式进行讲解
例一：创建用户
在不刷新的情况下，当创建的用户已经有了，就会在后面显示：该用户名已经存在；
当创建的用户不存在，就会在后面显示：该用户名可以使用；
<body>
<div>
创建用户名：<input type="text" id="uid"/>
<span id="xinxi"></span>
</div>
</body>
调用ajax代码如下
<script type="text/javascript">
$(document).ready(function(e) {$("#uid").blur(function(){ //blur失去焦点触发//把文本框里的内容取出来
var uid=$(this).val()//调用ajax
$.ajax({url:"chuli.php", //处理页面data:{u:uid}, //传递数据，JSON数据形式，key：value 多个数据用逗号隔开type:"POST", //提交方式datatype:"TEXT", //返回的数据类型；TEXT：文本、字符串,JSON,XMLsuccess:function(data){ //回调函数 包括形参，和上面的date没关系
if(data=="OK")
{
var str="该用户名可以使用";
$("#xinxi").html(str);
}
else
{
var str="<span style='color:red'>该用户名已经存在</span>";
$("#xinxi").html(str);
}
}, //当调用失败，调用该方法，（不常用）
error: function(){}
});
})
当代码运行到红色字体的代码时，会运行chuli.php代码，如下
<?php
//接受传递过来的参数
$uid=$_POST["u"];
//查数据库
include("DBDA.class.php");$db=new DBDA();$sql="select count(*) from user where uid='{$uid}'";$attr=$db->Query($sql);if($attr[0][0]==1) //当结果等于1，说明数据库已经存在该用户名。
{
echo "NO";
}
else
{
echo "OK";
}
例二：用户登录
<body>
<h1>登陆</h1>
<div>
用户名：<input type="text" id="uid"/>
</div>
<br />
<div>
密 码：<input type="text" id="pwd"/>
</div>
<div>
<input type="button" id="btn" value="登陆"/>
</div>
</body>
ajax代码
<script type="text/javascript">
$(document).ready(function(e) {$("#btn").click(function(){var uid=$("#uid").val();
var pwd=$("#pwd").val();$.ajax({url:"dengluchuli.php",
data:{u:uid,p:pwd},
type:"POST",
dataType:"TEXT",
success: function(data)
{
if(data=="OK")
{
window.location="ajax.php";
}
else
{
alert("用户名或密码错误");
}
},
});
})
});
</script>
调用处理代码：dengluchuli.php
<?php
$uid=$_POST["u"];
$pwd=$_POST["p"];include("DBDA.class.php");
$db=new DBDA();$sql="select count(*) from user where uid='{$uid}' and pwd='{$pwd}'";$attr=$db->Query($sql);if($attr[0][0]==1)
{
echo "OK";
}
else
{
echo "NO";
}
重点讲解：ajax的异步、同步讲解
在js中调用ajax时，有条async代码
async:false, //false同步，true异步 不写的情况默认为true异步
数据传输中
同步：传输必须等到接受方接收到，才能传输下一个
异步：传输不用等到对方接受就可以继续传输
AJAX同步false：AJAX必须等到处理完才能继续向下传输
AJAX异步true(默认)：AJAX在处理数据的同时，代码继续往下执行
以下面的例题讲解
测试AJAX异步情况
<div id="text" style="width:100px; height:100px; background-color:#0FF"></div>
$("#text").click(function(){
//语句1
$("#text").html("");
//语句2
$.ajax({
//此处没有async，所以默认情况为async:true，异步
url:"ajaxcl.php",
//data:{}, //因为没有要传输的数据，所以不用写
//type:"POST",
datatype:"TEXT",
success: function(data)
{
//语句4
$("#text").html(data);
}
});
//语句3
alert($("#sj").html());
要传入的处理页面是ajaxcl.php
<?php
echo "<div id='sj'>hello world!!</div>";
单击蓝色区域，会出现“语句3”的执行结果“undefined”，紧接着会在蓝色框内出现“语句4”的执行结果：hello world！！
因为语句2花费的时间要比语句3花费的时间长，所以要先显示语句3的执行结果：undefined；在然后显示语句4的执行结果，至此结束。
为了解决这个问题，需要在ajax中加入async:false,同步；等到处理完语句4，在向后传输处理语句3，结果如下
