標籤：資料轉送 value asc use log bsp var read new
AJAX的應用情境
1.非同步搜尋過濾內容資料
2.表單非同步驗證
3.非同步載入頁面“更多”資料
4.非同步處理登入
5.非同步處理使用者名稱是否註冊
AJAX的主要特點
1.在不重新整理頁面的情況下，與伺服器進行非同步互動
2.最佳化瀏覽器與伺服器的資料轉送，減少了不必要的資料往返
3.把部分資料處理轉移到用戶端，減少伺服器壓力
實現AJAX的基本思路
1.選擇一個js類庫
2.js部分向伺服器傳遞資料
3.php接收傳遞的資料，處理資料，返回js
4.js接收php的資料，並做相應的處理
AJAX基礎代碼
$.ajax({ url:"loginchuli.php", //是串連到的頁面 data:{uu:uid,pp:pwd}, //前邊的uu是名字後邊的uid是取到的值，前邊的pp是名字後邊的pwd是取到的值 type:"POST", //傳遞方式 dataType:"TEXT", //接受返回來的資料類型，有text/json/xml success:function(data){ //成功後，返回的資料，用這回呼函數接受一下，data是自己定義的名稱，接收回來的資料就存到data裡 alert(data); }
})
例子1：ajax非同步驗證登入
1.登陸介面
<body><div>使用者名稱：<input type="text" id="uid"/></div><div>密碼：<input type="password" id="pwd"/></div><div><input type="button" id="btn" value="登入"/></div></body></html><script type="text/javascript">$(document).ready(function(e) { $("#btn").click(function(){ //取使用者名稱和密碼 var uid=$("#uid").val(); var pwd=$("#pwd").val(); //調用ajax,裡邊是json資料，所以要加上{}括弧 $.ajax({ url:"loginchuli.php", //是串連到的頁面 data:{uu:uid,pp:pwd}, //前邊的uu是名字後邊的uid是取到的值，前邊的pp是名字後邊的pwd是取到的值 type:"POST", //傳遞方式 dataType:"TEXT", //接受返回來的資料類型，有text/json/xml success:function(data){ //成功後，返回的資料，用這回呼函數接受一下，data是自己定義的名稱，接收回來的資料就存到data裡 alert(data); if(data.trim()=="1") //判斷返回來的資料是不是1，如果是1，讓其跳轉到首頁面,data.trim()方法是把返回的資料去掉空格 { window.location.href="main.php"; } else { alert("使用者名稱或密碼錯誤"); } } }); })});
2.登入處理介面
<?php$uid=$_POST["uu"];$pwd=$_POST["pp"];include("DBDA.class.php");$db=new DBDA();$sql="select pwd from users where name=‘{$uid}‘"; //根據使用者名稱查詢密碼$mm =$db->Query($sql); if(!empty($pwd) && !empty($mm) && $mm[0][0]==$pwd){ echo "1"; } else { echo "0"; }
例子2：ajax判斷使用者名稱是否已經註冊
1.輸入頁面
<input type="text" id="uid" /><span id="jia"></span></body><script type="text/javascript">$("#uid").blur(function(){ //blur()失去焦點時間 //取使用者名稱 var uid = $("#uid").val(); //調AJAX $.ajax({ url:"uidchuli.php", data:{u:uid}, //傳遞給處理介面資料 type:"POST", dataType:"TEXT", success: function(data){ if(data>0) { $("#jia").html("該使用者名稱已存在"); $("#jia").css("color","red"); } else { $("#jia").html("該使用者名稱可用"); $("#jia").css("color","green"); } } }); })</script>
2.處理頁面
<?php$uid = $_POST["u"];include("DBDA.class.php");$db = new DBDA();$sql = "select count(*) from users where uid=‘{$uid}‘";echo $db->StrQuery($sql);
例子3：非同步搜尋過濾內容資料
1.顯示頁面
<style type="text/css">*{ margin:0px auto; padding:0px}.l{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-bottom:1px solid #C00}</style></head><body><br /><div style="width:200px; height:35px;border:2px solid #C00"><input style="width:196px; height:31px;" type="text" id="name" /></div><div id="list" style="width:200px;"> </div><script type="text/javascript">$("#name").keyup(function(){ //特別注意keyup()方法 是當輸入內容的變化時的事件 //取名稱 var n = $(this).val(); if(n!="") { //調AJAX $.ajax({ url:"listchuli.php", data:{n:n}, type:"POST", dataType:"TEXT", success: function(data){ var sz = data.split("|"); //split()是把字串分割成數組，是個二維數組 var str = ""; for(var i=0;i<sz.length;i++) { str = str+"<div class=‘l‘>"+sz[i]+"</div>"; //拼接div，然後扔給上面的框內 } $("#list").html(str); } }); } else { $("#list").html(""); } })</script>
2.處理頁面
<?php$name = $_POST["n"];include("DBDA.class.php");$db = new DBDA();$sql = "select areaname from chinastates where areaname like ‘%{$name}%‘ ";echo $db->StrQuery($sql);
AJAX部分---php-jquery-ajax；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
