Ajax又称异步刷新,可实现局部刷新的功能。
1.因为Ajax是jQuery内的一种方法,需先引用jQuery包:
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
2.设置一个文本框,可以检测输入的内容是否存在,并设置一个提示内容:
<div>
<input type="text" id="uid" />
<span id="ts"></span>
</div>
3.添加事件:
<script type="text/javascript"> $("#uid").blur(function(){ //当失去焦点时触发该函数 //取用户名 var uid = $(this).val(); //判断用户名是否存在,访问数据库 $.ajax({ url:"chuli.php", //处理页面的路径 data:{uid:uid}, //要提交的数据 type:"POST", //提交方式 dataType:"TEXT", //返回数据类型 success:function(data){ //回调函数 if(data=="1"){ $("#ts").text("该用户名已存在"); $("#ts").css("color","red"); }else{ $("#ts").text("该用户名可用"); $("#ts").css("color","green"); } } }); }) </script>
<?php $uid = $_POST["uid"]; require_once "../crud/DBDA.class.php"; $db = new DBDA(); $sql = "select count(*) from login where username='{$uid}'"; $arr = $db->query($sql); echo $arr[0][0];
Ajax中常用的参数:
url:处理页面的路径;
data:传递的数据,后面的参数中“:”前面的为名字,不会被解析,后面的为值;
type:提交方式,有两个参数,"POST"和"GET";
dateType:返回数据类型,常用的参数有:
"TEXT":返回字符串,用于返回简单的字符串;
"JSON":返回JSON数据,用于返回大量的数据,如要实现跨域访问,可使用"JSONP";
"XML":返回XML(可扩展标记语言)文档,同样用于返回大量的数据,这种更复杂;
success:处理方法成功后执行,后面加function函数,为回调函数;
async:为设置同步(false)、异步(true),同步表示=处理页面全部处理完后再执行,而异步为与处理页面同时执行,默认为异步;
beforeSend:在发送请求前执行该函数,后面加function函数,可与success同时使用,增加用户体验性;
complete:请求完成后执行,后面加function函数,可以在方法不成功的情况下执行;
error:出错时调用,后面加function函数;
timeout:设置超时时间,后面加数字,单位为毫秒,超时会自动结束程序。