Ajax 加载数据 练习代码
前端与js代码
<h1>显示数据</h1>
<tablewidth="100%"border="1"cellpadding="0"cellspacing="0">
<tr>
<td>代号</td>
<td>姓名</td>
<td>性别</td>
<td>民族</td>
<td>生日</td>
<td>操作</td>
</tr>
<tbodyid="bg">
</tbody>
</table>
</body>
<scripttype="text/javascript">
$(document).ready(function(e){
jiazai;
});
//加载数据的方法
functionjiazai
{
//异步
$.ajax({
url:"jiazai.php",
dataType:"TEXT",
success:function(data){
varhang=data.split("|");
varstr="";
for(vari=0;i<hang.length;i++)
{
varlie=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><inputtype='button'value='删除'class='shanchu'code='"+lie[0]+"'/></td></tr>";
}
$("#bg").html(str);
$(".shanchu").click(function{
varcode=$(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=newDBDA;
$sql="select*frominfo";
echo$db->StrQuery($sql);
再做个删除shanchu.php
<?php
include("DBDA.class.php");
$db=newDBDA;
$code=$_POST["c"];
$sql="deletefrominfowherecode='{$code}'";
if($db->Query($sql,0))
{
echo"OK";
}
else
{
echo"NO";
}
主要学了ajax的封装方法，方法就叫做加载数据，当要求页面不刷新的时候，就用这个方法就可以
页面加载数据完成后，要调一遍
删除完之后需要再加载一遍，要在调一遍
Ajax默认是异步的
异步就是ajax去调处理页面，处理数据的时候，代码继续往下走