例子:通过AJAX间接访问数据库,查出Nation表显示在页面上,并添加删除按钮
1 //首先在外层添加一个按钮,并造好表头 2 <div><input type="button" value="显示数据" id="btn" /></div> 3 <table width="100%" border="1" cellpadding="0" cellspacing="0" id="bg"> 4 </table>
JQurey代码
1 <script type="text/javascript"> 2 $(document).ready(function(e) { 3 //给上面按钮添加点击事件 4 $("#btn").click(function(){ 5 6 ShowAll(); 7 BindCK(); 8 }) 9 function BindCK() 10 { 11 $(".del").click(function(){ 12 13 var code = $(this).attr("val"); 14 $.ajax({ 15 url:"Delete.php", 16 data:{c:code}, 17 type:"POST", 18 dataType:"TEXT", 19 success: function(data){ 20 if(data.trim()=="OK") 21 { 22 ShowAll(); 23 BindCK(); 24 } 25 else 26 { 27 alert("删除失败"); 28 } 29 } 30 31 }); 32 33 }) 34 } 35 function ShowAll() 36 { 37 //调用AJAX 38 $.ajax({ 39 async:false, //设置为同步 40 url:"ChuLi.php", //将值传到该页面处理 41 dataType:"TEXT", //返回类型为TEXT 42 success: function(data){ 43 //造好第一列 44 var str = "<tr><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td><td>操作</td></tr>"; 45 //将每行分开,并形成数组 46 var hang = data.split("|"); 47 //遍历该数组 48 for(var i = 0; i<hang.length; i++) 49 { 50 //将每列分开,并形成数组 51 var lie = hang[i].split("^"); 52 //将数据放入表格中 53 str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><div class='del' val='"+lie[0]+"'>删除</div></td></tr>"; 54 } 55 //将代码加入 56 $("#bg").html(str); 57 58 } 59 }); 60 } 61 62 });
处理页面
1 //引入访问数据库的类 2 include("../dbda.class.php"); 3 $db = new dbda(); 4 $sql = "select * from Info"; 5 $attr = $db->Qurey($sql); 6 $str = ""; 7 //循环遍历数组 8 foreach($attr as $v) 9 { 10 //将每列用^分割 11 $str = $str.implode("^",$v); 12 //将每行用|分割 13 $str = $str."|"; 14 } 15 //最后减掉最后的| 16 $str = substr($str,0,strlen($str)-1); 17 echo $str;