以Ajax的方式访问数据库

时间:2022-03-03 07:05:38

一:以Ajax的方式显示数据

      我们都知道,如果用Ajax程序去加载一个动态页,则加载的实际上是这个动态页执行完毕后生成的静态HTML代码字符串。

     1.以原有的格式显示数据

<?php
header("Content-type: text/html; charset=gb2312"); 
include('conn.php');
$result=$conn->query("Select * From lyb limit 4 "); 
while($row=$result->fetch_assoc()){  
     echo "<tr><td>".$row['title']."</td>";
     echo "<td>".$row['content']."</td>";
     echo " <td>".$row['author']."</td>";
     echo " <td>".$row['email']."</td>";
     echo "<td>".$row['ip']."</td></tr>";
}    
?>
<html>
<head>
    <title>以Ajax方式显示数据</title>
 <script src="jquery.min.js"></script>
 <script>
$(function(){            //页面载入时执行
    $.post("10-1.php", function(data){
            $("#disp").append(data);
          //  alert(data);        //仅作测试,看服务器端数据是否已传来
        });
        } )           
</script>
</head>
<body>

<h2 align="center">以Ajax方式显示数据</h2>
<table border="1" width="100%"><tbody id="disp"><tr bgcolor="#e0e0e0">
        <th>标题</th> <th>内容</th> <th>作者</th>
        <th>email</th> <th>来自</th>
    </tr></tbody></table>

</body> 
</html> 

  2.以自定义的格式显示数据。

2.1返回JSON格式的字符串,将JSON数据以需要的格式显示。

<?
header("Content-type: text/html; charset=gb2312"); 
include('conn.php');
$result=$conn->query("Select * From lyb limit 4 "); 
echo '[';
$i=0;
while($row=$result->fetch_assoc()){
?>     {title:"<?= $row['title'] ?>", content:"<?= $row['content'] ?>", author:"<?= $row['author'] ?>", email:"<?= $row['email'] ?>", ip:"<?= $row['ip'] ?>"} <? if($result->num_rows!=++$i) echo ','; //如果不是最后一条记录 } echo ']' ?>

2.2按指定的特殊字符串格式输出一条记录,将返回的数组转换成字符串 implode('|',$row);然后使用split('|')分割该字符串得到一个数组。

<?
header("Content-type: text/html; charset=gb2312"); 
include('conn.php');
$result=$conn->query("Select * From lyb limit 4 "); 

  $row=$result->fetch_assoc();
  $str=implode('|',$row);//将数组各元素用“|”连接起来
  echo $str;        //输出用“|”分隔的特殊字符串

?>
<html>
<head>
    <title>分割一条记录中的数据</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
$(function(){            //页面载入时执行
   $.get("10-3.php", function(data) {
      str=data.split("|");
      var tr = "<tr><td>" + str[1]+ "</td><td>" + str[2]+ "</td><td>" + str[3] + "</td><td style='color:red'>" + str[4] + "</td><td>" + str[5] + "</td></tr>";
      $("#disp").append(tr);
  });    
})    

</script>
</head>
<body>


    <h3 align="center" style="margin:4px">分割显示一条记录中的数据</h3>
    

    <table border="1" width="95%" id="disp"><!--载入10-1.asp的容器元素-->
      <tr bgcolor="#e0e0e0">
        <th>标题</th> <th width="100">内容</th> <th width="60">作者</th>
        <th>email</th> <th width="80">来自</th>
    </tr>

</table>


</body> 
</html> 

二、以Ajax方式查询数据

  1、无刷新查询数据的实现

HTML代码如下:

<form action="#" method="get">
                 <div style="border:1px solid gray; background:#eee;padding:4px;"> 
                     查找信息:请输入关键字 <input name="keyword" id="keyword" type="text">
                     <select name="sel" id="sel">
                         <option value="sceNo">景点编号</option>
                         <option value="sceName">景点名称</option>
                         <option value="sPrice">景点价格</option>
                         <option value="author">发布人员</option>
                     </select>
                     <input type="button" id="Submit" value="查询">
                     <a href="index1.php">添加记录</a>
                     <a href="show_scenery.php">返回</a>
                 </div>
             </form>
            <div id="disp"></div>
             <script type="text/javascript">
                     $(function(){
                         $("#Submit").click(function(){
                             var keyword = $("#keyword").val();//得到下拉菜单中的选中项的value值
                             var sel = $("#sel").val();
                             alert(keyword);
                             if (keyword != 0) {
                                 $.get("search_scenery.php",{keyword:keyword,sel:sel,sid:Math.random()},function(data){
                                     $("#disp").html(data);
                                 });
                             } else{$("#disp").html("搜索内容不能为空")};
                         });
                     });
             </script>

php文件:

以Ajax的方式访问数据库以Ajax的方式访问数据库
$result = mysql_query("select * from `scenery`",$conn);

 $keyword =(trim($_GET['keyword']));
 $sel=($_GET['sel']);//获取选择的查询类型

      /*$keyword=trim($_GET['keyword']);//获取输入的关键字
     $sel=$_GET['sel'];//获取选择的查询类型*/
     $sql="select * from `scenery`";
     if ($keyword<>"") {
         $sql=$sql ." where $sel like '%$keyword%'";    //构造查询语句
     }
     $result=mysql_query($sql) or die('执行失败');
     if (mysql_num_rows($result)>0) {
         echo "<p>关键字为“ $keyword ”,共找到".mysql_num_rows($result)." 条记录</p>"; 
         echo "<a href='show_scenery.php'>返回</a>";
  ?>

         <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <title>查询结果</title>
         </head>
         <body>

        <form action="?del=1" method="post">
             <table border="1">
                 <tr bgcolor="#ccc" >
                     <th>景点编号</th>
                     <th>景点名称</th>
                     <th>景点描述</th>
                     <th>景点价格</th>
                     <th>发布人员</th>
                     <th>发布时间</th>
                     <th>删除</th>
                     <th>更新</th>
                 </tr>
                 <?php
                 while ($row = mysql_fetch_assoc($result)) {
                     ?>
                     <tr>

                         <td><?= $row['sceNo']?></td>
                         <td><?= $row['sceName']?></td>
                         <td><?= $row['sceDesc']?></td>
                         <td><?= $row['sPrice']?>元/人</td>
                         <td><?= $row['author']?></td>
                         <td><?= $row['createtime']?></td>
                         <td><input type="checkbox" name="selected[]" id="" value="<?= $row['sceNo']?>"></td><!-- 删除的复选框 -->
                         <td><a href="edit_scenery.php?sceNo=<?= $row['sceNo']?>">更新</a></td>
                     </tr>
                     <?php        
                 }
             }else echo "<script>alert('没有搜索到任何记录!');location.href='show_scenery.php'</script>";
             ?>
             <tr bgcolor="#ddd">
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td><input type="submit" value="删 除"></td><!-- 删除按钮 -->
                 <td></td>
             </tr>
         </table>
         </form>
         <p>共有<?= mysql_num_rows($result) ?>条记录 </p>
View Code