Note:
ajax技术
不用刷新页面,做局部刷新
不用form表单,因为不需要提交,通过JQuery控制
必须要有id
如果要用ajax可以用JQuery也可以用js写,
推荐JQuery 因为简单,直接引入JQuery包
js和JQuery是不能操作数据库的,如果需要处理数据库还需要用php语言
JQuery中不能直接嵌php代码,所以需要创建一个新的页面来写php代码
JQuery里面就需要传递数据过去,提交到php页面处理
1.输入用户名,密码后点击登录.输入正确跳转页面,输入错误出现提示对话框
登录页面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>登录</h1>
<div>用户名:<input type="text" id="uid" ></input></div>
<div>密码: <input type="text" id="pwd" ></input></div>
<div><input type="button" value="登录" id="btn"></input></div>
</body><!--用JQuery写ajax jquery是不能直接处理数据库的-->
<script type="text/javascript">
$(document).ready(function(e){
$("#btn").click(function(){
var uid = $("#uid").val();
var pwd = $("#pwd").val();
$.ajax({
//必须要写的四个参数,顺序不限
url:"cli.php",
//处理页面的路径
data:{u:uid,p:pwd},
//传递的数据.提交数一般以json格式来写,key是自定义的,:后面的值 就是上面的值
type:"POST",
//数据的提交传递方式,GET,POST 最好用POST
datatype:"TEXT",
//返回值的类型,TEXT,JSON,XML三种类型可选
success:function(data){
//如果ajax执行成功,返回来调用success函数即回调函数,返回值以参数的形式返回
if(data=="OK")
{
window.location="Main.php";
}
else
{
alert(data);
}
},
});
})
});
</script>
</html>
处理页面的代码
<?php //做ajax的处理页面,要顶格写<?php,不要空行,因为如果返回的是text,空一行的话,返回的结果不正确会带空格 include("DBDA.php"); $db = new DBDA(); $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"; }
2.输入用户名后判断是否存在
主页面代码
<!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> </head> <body> <div><input type="text" id="user" /><div id="ts"></div></div> </body> <script> $("#user").blur(function(){ var uid = $(this).val(); $.ajax({ url:"chuli.php", data:{u:uid}, dataType:"TEXT", success: function(d){ if(d=="OK") { $("#ts").html("用户名可用"); } else { $("#ts").html("<span style='color:red'>该用户名已存在!</span>") } } }) }); </script> </html>
处理页面
<?php include("DBDA.php"); $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"; }
3.点击出现按钮,出现下拉菜单,处理时综合以上两种写到同一处理页面
查询页面
<!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", datetype:"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>
综合处理页面
<?php $type = $_POST["type"]; include("../../DBDAajax.php"); //include("../../DBDA.php"); $db = new DBDAajax(); 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"; $attr = $db->Ajax($sql); echo $attr; //将数组拼成字符串 /* $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."<br>"; */ break; }