ajax讲解：“创建用户”和“用户登录”练习
Posted 坏小子之涛声依旧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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,XML success: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，结果如下
以上是关于ajax讲解：“创建用户”和“用户登录”练习的主要内容，如果未能解决你的问题，请参考以下文章