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 = "";//建立一个空字符串的变量用来存储拆分成粗来的字符串
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;