Ajax 封装加载数据与删除功能示例

本文介绍如何使用 Ajax 封装加载数据的方法，实现页面不刷新获取信息。通过 jiazai.php 处理查询，shanchu.php 处理删除，并在删除成功后重新调用加载方法。重点解析 Ajax 默认异步特性对代码执行顺序的影响。

前端与数据处理流程

前端与js代码


<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>民族</td>
    <td>生日</td>
    <td>操作</td>
  </tr>  
  <tbody id="bg">    
  </tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
   jiazai;
});

//加载数据的方法
function jiazai
{
  //异步  
  $.ajax({
 url:"jiazai.php",
 dataType:"TEXT",
 success: function(data){
 var hang = data.split("|");
 
 var str = "";
 
 for(var i=0;i<hang.length;i++)
 {
 var lie = hang[i].split("^");
 str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><input type='button' value='删除' class='shanchu' code='"+lie[0]+"' /></td></tr>";
 }
 
 $("#bg").html(str);
 
 $(".shanchu").click(function{
 
 var code = $(this).attr("code");
 $.ajax({
 url:"shanchu.php",
 data:{c:code},
 type:"POST",
 dataType:"TEXT",
 success: function(d){
 if(d.trim=="OK")
 {
 //重新加载
 jiazai;
 }
 else
 {
 alert("删除失败");
 }
 }
 });
 })
 }
    });
}
</script>

接着创建处理页面 jiazai.php 用于数据交互。


<?php
include("DBDA.class.php");
$db = new DBDA;
$sql = "select * from info";
echo $db->StrQuery($sql);

随后创建删除处理页面 shanchu.php 以执行数据删除逻辑。


<?php
include("DBDA.class.php");
$db = new DBDA;
$code = $_POST["c"];
$sql = "delete from info where code='{$code}'";
if($db->Query($sql,0))
{
  echo "OK";
}
else
{
  echo "NO";
}

Ajax 异步机制解析

核心内容在于学习 Ajax 的封装方法，该方法命名为加载数据。当需要实现页面不刷新的效果时，即可调用此方法。在页面数据加载完成后，必须调用一次该方法；而在执行删除操作后，也需要再次调用该方法以刷新列表。需要注意的是，Ajax 默认采用异步模式。所谓异步，是指当 Ajax 向处理页面发送请求并等待数据处理时，JavaScript 代码会立即继续向下执行，而不必等待服务器响应返回。

Ajax 异步加载与删除数据实战封装

前端与数据处理流程

Ajax 异步机制解析

实用工具推荐