实现Ajax请求，进行删除代码，客户端实时刷新数据

最新推荐文章于 2022-05-21 00:18:34 发布

原创最新推荐文章于 2022-05-21 00:18:34 发布 · 644 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何通过Ajax技术实现在客户端的无刷新删除操作。步骤包括在DAL层编写删除方法，创建UI层的一般处理程序，设置超链接删除按钮，引用jQuery库，以及编写jQuery脚本来处理删除事件，确保数据的实时更新。

如何使用ajax实现删除方法，并实现无刷新删除数据，具体方法如下：
1、首先，在我们写三层架构DAL层时，在相应的表类中书写删除方法（根据Id进行删除，具体方法参考下图）：

/// <summary>
/// 删除
/// </summary>
/// <param name="id"></param>
/// <returns></returns>public static int Delete(int id)
{  
  var sql = "delete from Product where Id=" + id;    
  return SqlHelper.NonQuery(sql);
}

2、其次，在UI层中添加一个一般处理程序，并在所添加的一般处理程序中去实现我们的删除代码（具体方法参考下图）：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using BLL;
 namespace _3C数码商城
 {    
 /// <summary>    
 /// HandDelete 的摘要说明    
 /// </summary>    
 public class HandDelete : IHttpHandler   
  {        
   public void ProcessRequest(HttpContext context)        
   {            
   //获取            
   var Id = Convert.ToInt32(context.Request.QueryString["Id"]);
   //执行删除          
   string delete = ProductManage.Delete(Id).ToString();
   context.Response.ContentType = "text/plain";
   context.Response.Write(delete);
   }        
       public bool IsReusable       
        {           
         get           
          { 
          return false;
          }        
       }    
    }
}

注意：在添加好一般处理程序后不要忘了引用BLL层，因为我们要通过BLL层调用删除方法。

3、设置一个超链接删除按钮

<a data-id='<%# Eval("Id")%>' href='#' class="pDelete">删除</a>

4、引用项目自带的jQuery文件

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

5、添加jQuery脚本，给删除按钮添加事件，处理data 实现无刷新删除数据

<script type="text/javascript">        
$(function () {  
 $(".pDelete").click(function () {       
          var $this = $(this); //获取删除按钮             
          var id = $this.attr("data-id"); //获取删除按钮绑定的主键 
          $.post("HandDelete.ashx?id=" + id,function (data) {             
                if (data == 1) {
                   $this.closest("tr").remove();                   
                                    }               
                                })           
                            })       
                         })
          </script>