返回 Ajax 加载...... 登陆

Ajax 加载数据 练习代码

巴扎黑 2017-01-14 13:35:33 788

这篇文章主要介绍了Ajax 加载数据,主要是为了查询表的显示,不用嵌入php通过ajax调用,现在手机端的更多显示功能都是通过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 加载数据 练习代码请关注PHP中文网(www.php.cn)其他文章!

最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网