今天讲了ajax的组成及使用方法：首先我们看看一个简单的ajax的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> </head> <body> <input type="text" id="uid" /> <span id="tishi"></span> </body> <script type="text/javascript"> $("uid").blur(function(){ //1.取内容 var uid = $(this).val(); //2.拿内容去数据库验证 $.ajax({ url:"chuli.php", //请求地址 data:{yhm:uid}, //要提交的数据 type:"POST", //提交的方式 dataType:"TEXT", //返回类型 TEXT字符串；JSON;XML success:function(data){//回调函数 if(data==0) { $("#this").text("该用户名可用"); $("#this").css("color","green"); } else { $("#this").text("该用户名已存在"); $("#this").css("color","red"); } } }) //3.给出提示 }) </script> </html>
我们可以看到里面有一些常用的类型：url,data,type,dataType,以及验证成功后的返回操作方法：success。上面都做了详细的注释，便于理解，下面是处理页面：
<?php $uid = $_POST["yhm"]; include("DBDA.class.php"); $db = new DBDA(); $sql = "select count(*) from users where uid='{$uid}'"; $arr = $db->Query($sql); echo $arr[0][0];
这里面没有任何的逻辑处理，只有简单的数据验证和处理。所有的逻辑处理都在客户端页面里面。
下面让我们做一个登陆的ajax页面：
首先看登录页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> </head> <body> <h1>登录页面</h1> <div>用户名：<input type="text" id="uid" /></div> <div>密 码:<input type="text" id="pwd" /></div> <input type="button" id="btn" value="登录" /> </body> <script type="text/javascript"> $("btn").click(function(){ //1.取数据 //2.验证数据 //3.提示 var uid = $("#uid").val(); var pwd = $("#pwd").val(); $.ajax({ url:"dlchuli.php", data:{uid:uid,pwd:pwd}, type:"POST", dataType:"TEXT", success: function(data){ //使用data之前，对data进行去空格处理 if(data.trim()=="OK") { window.location.href = "main.php"; } else { alert(用户名或密码错误); } } }); }) </script> </html>
显示效果如上图：
其次是处理页面：
<?php include("DBDA.class.php"); $db = new DBDA(); $uid = $_POST["uid"]; $pwd = $_POST["pwd"]; $sql = "select pwd from users where uid='{$uid}'"; $arr = $db->Query($sql); if($arr[0][0]==$pwd && !empty($pwd)) { echo "OK"; } else { echo "NO"; }
这样就能实现登陆处理页面，并且不会让用户访问数据库，大大增加了用户体验性和安全性。