首页 > 编程 > JavaScript > 正文

Ajax 加载数据 练习代码

2019-11-19 18:06:44
字体:
来源:转载
供稿:网友

前端与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

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

再做个删除 shanchu.php

<?phpinclude("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去调处理页面,处理数据的时候,代码继续往下走

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表