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; }