ajax基礎(chǔ)及簡單實例（僅學(xué)習(xí)）
時間：2023-05-24 08:00:02 | 來源：網(wǎng)站運營
時間：2023-05-24 08:00:02 來源：網(wǎng)站運營
ajax基礎(chǔ)及簡單實例（僅學(xué)習(xí)）：ajax（ asynchronous JavaScript xml ，異步JS和xml）技術(shù)是通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實現(xiàn)異步更新。這樣就可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。
先來看個簡單的例子，就是當(dāng)我們在注冊時，如果用戶名已存在，我們?nèi)绾瓮ㄟ^ajax技術(shù)來進(jìn)行數(shù)據(jù)的處理
復(fù)制代碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="
http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標(biāo)題文檔</title>
6 <script src="../jquery-1.11.2.min.js"></script>
7 </head>
8
9 <body>
10
11 <input type="text" id="uid" /><span id="ts"></span>
12
13 </body>
14 <script type="text/javascript">
15
16 $("#uid").blur(function(){
17 //取出用戶名
18 var uid = $(this).val();
19
20 //去數(shù)據(jù)庫進(jìn)行匹配
21 $.ajax({
22 url:"chuli.php", //處理頁面的路徑
23 data:{u:uid}, //要提交的數(shù)據(jù)是一個JSON
24 type:"POST", //提交方式
25 dataType:"TEXT", //返回數(shù)據(jù)的類型
26 //TEXT字符串 JSON返回JSON XML返回XML
27 success:function(data){ //回調(diào)函數(shù) ,成功時返回的數(shù)據(jù)存在形參data里
28 if(data.trim()=="OK") //trim()方法會去掉頁面中的冗余空格
29 {
30 $("#ts").html("該用戶名可用");
31 $("#ts").css("color","green");
32 }
33 else
34 {
35 $("#ts").html("該用戶名不可用");
36 $("#ts").css("color","red");
37 }
38 }
39 });
40 })
41
42 </script>
43 </html>
復(fù)制代碼
下面是ajax發(fā)生數(shù)據(jù)到相應(yīng)php處理頁面
復(fù)制代碼
1 <?php
2 $uid = $_POST["u"]; //通過ajax發(fā)送的data：json的key數(shù)據(jù)來接收相應(yīng)的value
3 require "DataBse.class.php";
4 $db = new DataBase();
5
6 $sql = "select count(*) from users where uid='{$uid}'";
7
8 $arr = $db->query($sql);
9
10 if($arr[0][0])
11 {
12 echo "NO"; //處理頁面的所有輸出內(nèi)容都將返回給success里面的回調(diào)data
13 }
14 else
15 {
16 echo "OK";
17 }
復(fù)制代碼
看看效果
登陸的邏輯和做法和注冊類似。
2.利用ajax完成調(diào)用數(shù)據(jù)頁面的加載
以前了解的方法就是在頁面中嵌入php代碼去調(diào)數(shù)據(jù)，然后刷新頁面完成加載，這里我們說下如何用ajax完成數(shù)據(jù)加載（感覺比嵌入php要繁瑣一些，因為還沒接觸數(shù)據(jù)庫內(nèi)容轉(zhuǎn)成son數(shù)據(jù)傳輸） 先來看看吧
第一個例子 加載個基礎(chǔ)select下拉選擇
復(fù)制代碼
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="
http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>無標(biāo)題文檔</title>
6 <script src="../jquery-1.11.2.min.js"></script>
7 </head>
8
9 <body>
10 <h1>顯示數(shù)據(jù)</h1>
11
12 <select id="sel"> //先寫個下拉的外標(biāo)簽 ，內(nèi)容先空著，等著加載過來數(shù)據(jù)
13
14 </select>
15
16 </body>
17 <script type="text/javascript">
18 $(document).ready(function(e) { //頁面加載完開始執(zhí)行
19
20
21 $.ajax({ //調(diào)用ajax方法
22 async:false, //async表示異步，有兩個值，false表示同步（頁面加載順序是一步步來的，下面的內(nèi)容加載要等ajax執(zhí)行結(jié)束才開始），true表示同步（加載過程不影響ajax下面的數(shù)據(jù)繼續(xù)執(zhí)行）
23 url:"chuli.php",
24 dataType:"TEXT",
25 success: function(data){
26 var hang = data.split("|"); //將返回的數(shù)據(jù)調(diào)用split方法進(jìn)行拆分，返回的hang數(shù)組就是每一行的數(shù)據(jù)
27 var str = ""; //定義一個空字符串，來存最后數(shù)據(jù)
28 for(var i=0;i<hang.length;i++) //將每行的數(shù)據(jù)循環(huán)遍歷，
29 {
30 var lie = hang[i].split("^"); //行的每個數(shù)據(jù)就代表列，然后調(diào)用split方法繼續(xù)將列數(shù)據(jù)拆開
31 str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; //定義所有的數(shù)據(jù)都放在option標(biāo)簽里，然后存入str
32 }
33 $("#sel").html(str); //將str內(nèi)容放入下拉列表中
34
35 }
36 });
37
38
39 });
40 </script>
41 </html>
復(fù)制代碼
看一下處理頁面，不看處理頁面可能看不懂返回數(shù)據(jù)的處理
復(fù)制代碼
1 <?php
2 require "DataBase.class.php";
3 $db = new DataBase();
4
5 $sql = "select * from login";
6
7 //var_dump($arr);
8
9 $arr=$db->query($sql);
10
11 $str="";
12 foreach ($arr as $v){
13 $str.=implode("^",$v)."|"; //將每個$v之間用 |分開 然后$v里面的每個數(shù)據(jù)中間用^分開
14
15
16 }
17 $str=substr($str,0,strlen($str)-1); //最后末尾會多余一個|,用字符串截取一下，去掉最后一個
18 echo $str;
關(guān)鍵詞：學(xué)習(xí),實例,簡單,基礎(chǔ)
在線咨詢