AJAX--显示删除练习

Posted MrY的nn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX--显示删除练习相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>//加载jquery包
<style type="text/css">//美观删除加了css样式
.shc{ width:60px;
     height:25px;
     line-height:25px;
     text-align:center;
     vertical-align:middle;
     color:#FFF;
     background-color:#90F;}
.shc:hover //鼠标覆盖background-color变色,同时鼠标变成小手
{cursor:pointer;
background-color:#FF6;
color:#000;

}

</style>
</head>

<body>

<table id="table" width="100%" border="1" cellpadding="0" cellspacing="0">

</table>
</body>
<script type="text/javascript">
$(document).ready(function(e){//jquery外层
    
        ShowAll();//调用ShowAll()
        ShanChu();//调用ShanChu()
        
    
   function ShowAll(){
    $.ajax({
        async:false,//将默认的异步改为同步,要不然程序因为没有接收无法继续执行
        url:"ChuLi.php",
        dataType:"TEXT",
        success:function(data){
            //alert(data);
            var str="<tr> <td>代号</td> <td>姓名</td> <td>性别</td> <td>民族</td> <td>生日</td> <td>操作</td></tr>";
            
            var hang=data.split("|");
            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><div class=‘shc‘ zhj=‘"+lie[0]+"‘>删除</div></td></tr>";//粗心知道可以自定义属性,也知道是根据主键来删除,可是忘记给zhj赋值了呃,所以运行不出来
        
        
              }  
               $("#table").html(str);
            }                
           });
   }
           function ShanChu(){
           $(".shc").click(function(){
               var code=$(this).attr("zhj");
               $.ajax({
                   async:false,//将默认的异步改为同步
                   url:"delete.php",//处理页面
                   data:{code:code},//json方式
                   type:"POST",//获取方式post,注意这里的post一定要加"",而且要大写
                   dataType:"TEXT",//注意:这里的dataType中的T一定要大写
                   success: function(data){
                       if(data.trim()=="ok")
                       {
                               ShowAll();
                               ShanChu();
                       }
                       else
                       {
                           alert("删除失败");
                       }
                                              
                     }               
                   
                   });
               
               })
    
           }
    
});




</script>
</html>

delete.php页面

<?php
$code=$_POST["code"];
include("CHaXun.class.php");
$db=new ChaXun();
$sql="delete from Info where Code=‘{$code}‘";
$attr=$db->Query($sql,1);//CHaXun.class.php中默认type=0为查询,这里删除所以type需要更改为1
if($attr)
{
echo
"ok";
}

else
{
echo
"no";
}

 

以上是关于AJAX--显示删除练习的主要内容,如果未能解决你的问题,请参考以下文章

ajax中网页传输TEXT——带有删除功能的数据库表格显示练习

5月21 练习AJAX的查看详细及批量删除

AJAX基本操作 + 登录 + 删除 + 模糊查询

AJAX 搜索自动显示练习

ajax中网页传输JSON——下拉列表显示练习

ajax分页练习