读《掌握 Ajax》之基于Table的无刷新删除操作

最新推荐文章于 2025-08-15 10:38:51 发布

转载最新推荐文章于 2025-08-15 10:38:51 发布 · 88 阅读

文章标签：

#数据库 #ui #xhtml

本文介绍如何使用ASP.NET结合AJAX技术实现Web应用中的数据展示及删除功能，具体步骤包括构建数据库、读取数据并显示在页面上、通过AJAX调用后端处理程序完成数据删除等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

平台：VS.Net2005或VS.Net2003
准备工作：
新建DataShow.aspx和DataProcess.aspx页面
创建access数据库，名为：ajaxDB.mdb，放在文件夹App_Data下
在数据库中创建表T_user【u_id（主键）,u_name,u_sex,u_address】
DataShow用于数据呈现；
DataProcess用于处理各种与数据库的交互操作，并返回数据集或操作结果；
删除操作
1.读取数据库数据并显示到DataShow.aspx页面；
注意：
其中的Show变量必须是public类型的，以确保前台页面能取到它的值！
为table表的每行设定行号（tr1，tr2......在删除操作中没有用到行号，留以后备用）
DataShow后台代码如下：

DataShow后台代码

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.OleDb;

public partial class DataShow : System.Web.UI.Page

{

public string Show;

protected void Page_Load(object sender, EventArgs e)

{

BindTable();

}

//从数据库中读取数据并显示到当前页面

private void BindTable()

{

string connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" + Server.MapPath("App_Data/ajaxDB.mdb");

OleDbConnection conn = new OleDbConnection(connstr);

if (conn.State == ConnectionState.Open)

{

conn.Close();

}

conn.Open();

OleDbDataAdapter adapter = new OleDbDataAdapter("select u_id,u_name,u_sex,u_address from T_user", conn);

DataTable tb = new DataTable();

adapter.Fill(tb);

for (int i = 0; i < tb.Rows.Count;i++ )

{

Show += "<tr id='tr"+i+"'>";//行id

Show += "<td>" + tb.Rows[i]["u_id"] + "</td>";

Show += "<td>" + tb.Rows[i]["u_name"] + "</td>";

Show += "<td>" + tb.Rows[i]["u_sex"] + "</td>";

Show += "<td>" + tb.Rows[i]["u_address"] + "</td>";

Show += "<td><a href='' onclick='javascript:return update(this);'>修改</a></td>";

Show += "<td><a href='' onclick='javascript:return del(this);'>删除</a></td>";

Show += "<td><a href='' onclick='javascript:return add();'>增加</a></td>";

Show += "</tr>";

}

DataShow前台HTML代码如下：

DataShow前台HTML代码

@ Page Language="C#" AutoEventWireup="true" CodeFile="DataShow.aspx.cs" Inherits="DataShow" %>

//创建XMLHttpRequest对象

var xmlhttp = new MyXmlHttp();

//弹出删除提示 obj："删除"对象（位于td内的对象）

function del(obj)

{

if(confirm("您确定删除？"))confimdel(obj);

return false;

}

//处理删除操作

//先删除数据库中数据，如果执行成功则删除页面上相应的行

function confimdel(obj)

{

var tr=obj.parentElement.parentElement;//本行的tr对象

var url="DataProcess.aspx?Flag=delete&uid="+escape(tr.cells[0].innerText);//处理删除操作

var result=xmlhttp.getPage(url);//返回操作结果

if(result=="delete_1")//操作成功

{

//tr.tbody.table.deleteRow(tr.rowIndex)

tr.parentElement.parentElement.deleteRow(tr.rowIndex);//删除页面上相应的行

document.all("lab_flag").innerText="删除成功！";

}

if(result=="delete_0")//操作失败

{

document.all("lab_flag").innerText="删除失败！";

}

return false;

}

</script>

</head>

<body>

<table>

<%=Show %>

</table>

</form>

</body>

</html>

2.点击删除触发del(obj)函数，弹出删除提示；
3.选择确定删除后，触发confimdel（obj）函数；
4.通过“删除”这个连接对象得到其所在的行对象tr；
var tr=obj.parentElement.parentElement
5.通过行对象取到其第一个td内的用户编号；
tr.cells[0].innerText
6.将用户编号传到DataProcess.aspx 页面；
DataProcess后台代码如下：

DataProcess后台代码

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.OleDb;

public partial class DataProcess : System.Web.UI.Page

{

public string Result;

private string Flag,uid;

protected void Page_Load(object sender, EventArgs e)

{

if (Request.QueryString["Flag"] != null) Flag = Request.QueryString["Flag"];

if (Request.QueryString["uid"] != null) uid = Request.QueryString["uid"];

if (Flag == "delete") FunDel();

}

//处理删除操作

private void FunDel()

{

string connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data source=" + Server.MapPath("App_Data/ajaxDB.mdb");

OleDbConnection conn = new OleDbConnection(connstr);

if (conn.State == ConnectionState.Open)

{

conn.Close();

}

conn.Open();

OleDbCommand cmd = new OleDbCommand("delete from T_user where u_id="+uid, conn);

int count=cmd.ExecuteNonQuery();

cmd.Dispose();

if (conn.State == ConnectionState.Open)

{

conn.Close();

}

if (count == 0)

Result = "delete_0";

else

Result = "delete_1";

}

DataProcess前台HTML代码如下：

DataProcess前台HTML代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataProcess.aspx.cs" Inherits="DataProcess" %><%=Result%>

7.DataProcess后台通过FunDel（）方法对数据库进行操作，并将操作结果存储在全局变量Result中；
8.DataShow页面的xmlhttp.getPage(url)方法获取到DataProcess的操作结果，即Result的值；
9.根据Result返回值的不同对当前页面元素进行操作,即javascript操作html元素；
10.删除table表的一行用以下代码：
tr.parentElement.parentElement.deleteRow(tr.rowIndex)，其中tr表示行对象，如果该行的id为tr1则tr=document.all("tr1")
注意：xmlhttp.getPage(url)方法会取到DataProcess.aspx页面上所有你通过查看源文件看到的东西。
所以<%=Result%>和
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataProcess.aspx.cs" Inherits="DataProcess" %> 在同一行，
否则要处理换行