Ajax 加载数据 练习

Posted 2020-08-26 欧元

查询表的显示，查询显示如果不嵌入php代码的话，用ajax怎么实现？

 

 

<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>

 

 

 

再做个处理页面

 

<?php
include("DBDA.class.php");
$db = new DBDA();

$sql = "select * from info";

echo $db->StrQuery($sql);

 

 

再做个删除

 

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