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> <div><input type="button" value="登录" id="btn" /></div> <div><input type="text" id="user" onblur="" /><div id="ts"></div></div> </body> <script type="text/javascript"> $(document).ready(function(e) { $("#btn").click(function(){ var uid=$("#uid").val(); var pwd=$("#pwd").val(); $.ajax({ url:"chuli.php",//处理页面的路径 data:{u:uid,p:pwd,type:0},//前面是key，随便取，后面是上面的var uid type:"POST",//数据的提交传递方式 datatype:"TEXT",//返回值的类型 一种是TEXT 一种是JSON 一种是XML 只有这三种方式 success:function(data){//回调函数，如果提交成功了 会返回来调用这个函数 alert(data); } }); }) $("#user").blur(function(){ var uid = $(this).val(); $.ajax({ url:"chuli.php", data:{u:uid,type:1}, type:"POST", dataType:"TEXT", success: function(d){ if(d=="OK") { $("#ts").html("用户名可用"); } else { $("#ts").html("<span>该用户已存在</span>"); } } }) }) }); </script> </html>
第二个目的主页面
<!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> <div> <select id="sel"> </select> </div><br /> <input type="button" id="btn" value="出现" /> </body> <script type="text/javascript"> $(document).ready(function(e) { $("#btn").click(function(){ $.ajax({ url:"chuli.php", data:{type:2}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#sel").html(str); } }); }) }); </script> </html>
两个页面采用一个处理页面“chuli.php”
当case=0和case=1的时候是第一个的。当case=2的时候是第二个的
<?php $type=$_POST["type"]; include("DBDA.php"); $db=new DBDA(); switch($type) { case 0: $uid=$_POST["u"]; $pwd=$_POST["p"]; $sql ="select count(*) from login where username='{$uid}' and password='{$pwd}'"; $attr = $db->Query($sql); if($attr[0][0]==0) { echo"用户名密码不正确"; }else { echo "OK"; } break; case 1: $uid = $_POST["u"]; $sql = "select count(*) from login where username='{$uid}' "; $attr =$db->Query($sql); if($attr[0][0]==0) { echo "OK"; }else { echo "NO"; } break; case 2: $sql="select * from Nation"; $attrajxa = $db->ajaxQuery($sql); echo $attrajxa; //n001^汉族|n002^回族|n003^苗族 /* 根据|拆 0----n001^汉族 1----n002^回族 2----n003^苗族 每一行根据^拆 i=0--- 0---n001 1---汉族 i=1--- 0--n002 1--回族 */ /*$str =""; for($i=0;$i<count($attr);$i++) { for($j=0;$j<count($attr[$i]);$j++) { $str = $str.$attr[$i][$j]; $str = $str."^"; } $str = substr($str,0,strlen($str)-1); $str = $str."|"; } $str = substr($str,0,strlen($str)-1); echo $str; break;*/ }
