標籤:
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>阿賈克斯</title> 6 <script src="../jquery-1.11.2.min.js"></script>//引用JQUERY包 7 </head> 8 9 <body>10 <select id="sel">11 12 13 </select>14 </body>15 <!--阿賈克斯方式就相當於一個工廠,給他一個東西返回一個我想要的東西16 這個之間轉換的過程是需要操作資料庫的,那麼我們就需要專門去做一個頁面去操作資料庫17 然後JS這一端只負責給處理頁面傳一個值和接收一個處理頁面返回的值18 處理頁面要實現的功能是接收到傳過去的值然後產出相應的結果並返回-->19 <script type="text/javascript">20 21 $(document).ready(function(e) {22 //使用阿賈克斯需要調用jquery裡面的ajax方法23 $.ajax({24 //格式是固定的不要亂寫25 url:"chuli.php",//串連到處理頁面26 data:{}, //要提交的值27 type:"POST",//提交方式28 dataType:"TEXT",//傳回型別29 success:function(s){//回呼函數,成功之後幹什麼30 var hang = s.split("|");//現根據|來拆分字串拆成行來31 var str = "";//建立一個Null 字元串的變數用來儲存拆分成粗來的字串32 for(var i=0;i<hang.length;i++)33 {34 var lie = hang[i].split("^");//經過迴圈以^符號來拆分列35 str = str+"<option value=‘+lie[0]+‘>"+lie[1]+"</option>"36 }37 $("#sel").html(str);//把拆分好的字串扔給ID為sel的單位38 39 }40 41 });42 43 44 });45 46 47 </script>48 </html>
chuli.php頁面代碼
1 <?php 2 $db = new MySQLi("localhost","root","","aaaaa"); 3 !mysqli_connect_error() or die("串連失敗!"); 4 $sql = "select * from car"; 5 $r = $db->query($sql); 6 $attr = $r->fetch_all(); 7 $str = ""; 8 foreach($attr as $v) 9 {10 $str = $str.implode("^",$v);11 $str = $str."|";12 }13 14 $str = substr($str,0,strlen($str)-1);15 16 echo $str;
傳回值是TEXT的阿賈克斯方法