Ajax简单的页面局部刷新从数据库获取数据

最新推荐文章于 2022-08-07 15:39:41 发布

weixin_33709609

最新推荐文章于 2022-08-07 15:39:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签：数据库 php python

原文链接：https://my.oschina.net/HeYuhui/blog/650505

本文介绍了一种使用AJAX技术实现“加载更多”功能的方法。具体实现包括：前端JavaScript负责发送请求并创建DOM元素显示数据；后端PHP处理请求并从数据库获取数据返回。此方案实现了网页数据的异步加载，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

JS部分

<script>
      var k = 1;  
        function getmore(){
             var s = k;
        var allgamediv = document.getElementById('1'); 
            var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     var newdiv = document.createElement('div'); 
     allgamediv.appendChild(newdiv);
    newdiv.innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","getmore",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("last="+k);
  k++;
        }

    </script>

向服务器传送多个变量时的写法：

 xmlhttp.send("last="+s+"&"+"type="+type);

html部分：

<h2>全部游戏</h2><hr />
    <table>
        <tr>
            <th> <a href="<?php echo $game_info[0][3] ?>"><img class="gameicon" src="<?php echo $game_info[0][4] ?>"><br /><?php echo $game_info[0][1] ?></a></th>
            <th> <a href="<?php echo $game_info[1][3] ?>"><img class="gameicon" src="<?php echo $game_info[1][4] ?>"><br /><?php echo $game_info[1][1] ?></a></th>
            <th> <a href="<?php echo $game_info[2][3] ?>"><img class="gameicon" src="<?php echo $game_info[2][4] ?>"><br /><?php echo $game_info[2][1] ?></a></th>
            <th> <a href="<?php echo $game_info[3][3] ?>"><img class="gameicon" src="<?php echo $game_info[3][4] ?>"><br /><?php echo $game_info[3][1] ?></a></th>
            <th> <a href="<?php echo $game_info[4][3] ?>"><img class="gameicon" src="<?php echo $game_info[4][4] ?>"><br /><?php echo $game_info[4][1] ?></a></th>
        </tr>
        <tr>
            <th> <a href="<?php echo $game_info[5][3] ?>"><img class="gameicon" src="<?php echo $game_info[5][4] ?>"><br /><?php echo $game_info[5][1] ?></a></th>
            <th> <a href="<?php echo $game_info[6][3] ?>"><img class="gameicon" src="<?php echo $game_info[6][4] ?>"><br /><?php echo $game_info[6][1] ?></a></th>
            <th> <a href="<?php echo $game_info[7][3] ?>"><img class="gameicon" src="<?php echo $game_info[7][4] ?>"><br /><?php echo $game_info[7][1] ?></a></th>
            <th> <a href="<?php echo $game_info[8][3] ?>"><img class="gameicon" src="<?php echo $game_info[8][4] ?>"><br /><?php echo $game_info[8][1] ?></a></th>
            <th> <a href="<?php echo $game_info[9][3] ?>"><img class="gameicon" src="<?php echo $game_info[9][4] ?>"><br /><?php echo $game_info[9][1] ?></a></th>
        </tr>
    </table>
    
    </div>
     <div onclick="getmore()" style="bottom: 0;" >加载更多</div>

PHP部分

<?php
$last = $_POST['last']*10; 
$mysqli=new mysqli("localhost","root","","100week");
 $mysqli->query("set names utf8;");
 $get_info=$mysqli->query("select * from game_info limit $last,10");
 if ($get_info) {
         if($get_info->num_rows>0){                                               //判断结果集中行的数目是否大于0
             $i=0;
                  while($row =$get_info->fetch_array()){                        //循环输出结果集中的记录
                      for ($j=0;$j<6;$j++){
                      $game_info[$i][$j] = $row[$j];
                      }
                      $i++;
                  }
                  echo "<table><tr>";
                  for ($i=0;$i<5;$i++){
                  echo '<th> <a href="'. $game_info[$i][3].'"><img class="gameicon" src="'.$game_info[$i][4].'"><br />'.$game_info[$i][1].'</a></th>';
                  }
                  echo "</tr><tr>";
                   for ($i=5;$i<10;$i++){
                  echo '<th> <a href="'. $game_info[$i][3].'"><img class="gameicon" src="'.$game_info[$i][4].'"><br />'.$game_info[$i][1].'</a></th>';
                  }
                   echo "</tr></table>";
         } 
}else {
         echo "查询失败";
}
?>

简单介绍：用户点击加载更多--页面与服务器通信传送变量获取数据---服务器从数据库获取数据--通过ajax技术post到js中---js创建DIV把数据输出

转载于:https://my.oschina.net/HeYuhui/blog/650505