现在我们在编程的时刻总是要利用一些最新的技术去解决问题。。。。下面是我用ajax与jequery结合在一起使用的一个实例。希能给一起学习的朋友们带来帮助。
前台代码:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>用户信息操作</title>
<script language="javascript" type="text/javascript" src="ajax/jquery.js"></script>
<script language="javascript" type="text/javascript">
//页面的初始化
$(document).ready( function(){ loadUserInfo(); });
//加载用户信息到页面
function loadUserInfo()
{
$.ajax(
{
type:"POST",
url:"Default.aspx",
data:{action:'action'},
success:loadUserInfoCallbace
}
);
}
//页面初始化回调函数
function loadUserInfoCallbace(r)
{
if(r=="")
{
$("#userInfo").html("暂无数据");
}
else
{
$("#userInfo").html(r);
}
}
//全部选中
function CheckAll(obj)
{
$("input[@type=checkbox][@name=checkItem]").attr("checked",$(obj).attr("checked"));
}
//收集所有选中项
function NumberID()
{
var allcheckboxs=$("input[@type=checkbox][@name=checkItem][checked]");
var ids="";
for(i=0;i<allcheckboxs.length;i++)
{
var id=$(allcheckboxs[i]).attr("id").split("_")[1];
ids+=id;
ids+=",";
}
return ids;
}
//删除用户
function DeleteUser()
{
if(!window.confirm("您真的要删除选中用户信息吗?"))
{
return;
}
var ids=NumberID();
$.ajax({
type:'POST',
url:'Default.aspx',
data:{action:'Delete',userid:ids},
success:deleteUserCall
});
}
//删除用户回调函数
function deleteUserCall(r)
{
if(r=="ok")
{
alert("删除成功");
loadUserInfo();
}
else
{
alert("失败");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align:center" id="userInfo">
</div>
</form>
</body>
</html>
后台代码:
using System;
using System.Data;
using System.Configuration;
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.SqlClient;
using System.Text;
public partial class _Default : System.Web.UI.Page
{
string Straction = "";
protected void Page_Load(object sender, EventArgs e)
{
Straction = Request["action"];
if(Straction=="action")
{
UserInfo();
}
if (Straction == "Delete")
{
DeleteUser();
}
}
/// <summary>
/// 周昕 2009-6-8号加载用户详细信息
/// </summary>
public void UserInfo()
{
SqlConnection mycon = new SqlConnection();
mycon.ConnectionString = ConfigurationManager.ConnectionStrings["BoBoConn"].ToString();
string sql = "select * from loginuser";
SqlCommand mycom = new SqlCommand(sql, mycon);
mycon.Open();
SqlDataReader myda = mycom.ExecuteReader();
StringBuilder str = new StringBuilder();
str.Append("<table><tr><td><input id='checkall' name='checkall' type='checkbox' onclick='CheckAll(this)'/>全选</td><td>用户名</td><td>用户全名</td></tr>");
while (myda.Read())
{
str.Append("<tr><td>");
str.Append("<input id='checkItem_" + myda["ID"].ToString() + "' type='checkbox' name='checkItem' style='text-align='left' onclick=' NumberID()'/></td>");
str.Append("<td>" + myda["UserName"].ToString() + "</td>");
str.Append("<td>" + myda["FullName"].ToString() + "</td></tr>");
}
str.Append("</table>");
str.Append(" <div style=' text-align:center'><input type='button' value='删除' onclick='DeleteUser()' /></div>");
Response.Clear();
Response.ContentType = "application/text";
Response.Write(str);
Response.End();
}
/// <summary>
/// 周昕 2009-6-8 删除选中用户的详细信息
/// </summary>
public void DeleteUser()
{
//获取用户ID
string strID = Request["userid"];
string Userid = strID.Substring(0, strID.Length - 1);
//转换成为数组
string[] stridArray = Userid.Trim().Split(',');
string sql = "delete from loginuser where ID='" + stridArray[0].ToString() + "'";
for (int i = 0; i < stridArray.Length; i++)
{
string id = stridArray[i].ToString();
sql += "or ID='" + id + "'";
}
SqlConnection mycon = new SqlConnection();
mycon.ConnectionString = ConfigurationManager.ConnectionStrings["BoBoConn"].ToString();
mycon.Open();
SqlCommand mycom = new SqlCommand(sql, mycon);
int n = (int)mycom.ExecuteNonQuery();
mycon.Close();
if (n > 0)
{
Response.Clear();
Response.ContentType = "application/text";
Response.Write("ok");
Response.End();
}
else
{
Response.Clear();
Response.ContentType = "application/text";
Response.Write("no");
Response.End();
}
}
}
效果图:
分享到:
相关推荐
传统的分页方式需要用户每次点击分页按钮时整个页面重新加载,而Ajax(Asynchronous JavaScript and XML)技术则可以实现页面无刷新的分页效果,提供更流畅的浏览体验。本文将深入讲解如何利用JSP和Ajax来实现这一...
总结以上知识点,上述实例展示了如何利用***、AJAX和jQuery实现Web应用中的批量操作及无刷新页面更新,涵盖了从前台到后台的关键技术实现与注意事项。这样的实践不仅提高了用户界面的友好性,还增强了应用程序的响应...
在网页开发中,"ajax实现无刷新三联动下拉框"是一种常见的交互设计技术,它提高了用户体验,使得用户在选择一项时,其他相关的下拉框能够自动更新而无需页面整体刷新。这种技术主要依赖于AJAX(Asynchronous ...
Ajax 实现无刷新树是一种网页开发技术,它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术提高了用户体验,因为它减少了页面加载时间,使得用户能够更流畅地浏览和交互。以下是对...
【Ajax 实现无刷新对数据库操作】是一种现代Web开发中的技术组合,主要用于创建更快速、更互动的用户体验。Ajax(Asynchronous JavaScript and XML)的核心在于,它允许网页在不重新加载整个页面的情况下与服务器...
其中一种非常实用的技术就是AJAX(Asynchronous JavaScript and XML),它允许网页在不重新加载整个页面的情况下与服务器进行数据交互,从而实现了局部刷新或“无刷新”效果。本文将详细介绍如何使用AJAX实现无刷新...
"Ajax无刷新内容tabs标签切换"是一种技术,它允许用户在不重新加载整个网页的情况下切换页面内容,显著提升了交互性与效率。这种技术通常用于构建诸如导航菜单、选项卡式界面等元素,让用户能够快速浏览和操作大量...
而Ajax技术则可以实现下拉框的无刷新选择,用户在改变下拉框选项时,后台能够即时获取选择并返回相应的数据,页面其他部分保持不变,提高了用户操作的流畅性。 要实现Ajax驱动的无刷新下拉框,首先需要在HTML中创建...
在本教程中,我们将深入探讨如何使用AJAX实现无刷新的三级联动效果。 无刷新三级联动通常指的是在三个下拉菜单中,当用户在第一个菜单中选择一个选项时,第二个菜单会自动根据第一个选项的值更新其选项;接着,当...
Ajax无刷新上传图片技术的出现,解决了这一问题,实现了在不刷新页面的情况下完成图片上传,提高了交互性。本文将详细介绍Ajax无刷新上传图片的核心原理和技术实现。 ### 1. 基本概念 - **Ajax(Asynchronous ...
本项目"Ajax无刷新三级联动和分页"正是利用了这一特性,实现了在用户选择省市区时的无缝交互以及数据分页显示。 一、Ajax无刷新技术 Ajax的核心是通过XMLHttpRequest对象向服务器发送异步请求,获取数据后,...
本文将详细讲解如何使用AJAX实现dropdownlist(下拉列表)的无刷新动态绑定以及联动效果。 一、AJAX基础 AJAX的核心是通过JavaScript在后台与服务器进行异步数据交换,无需刷新整个页面,即可更新部分网页内容。在...
这个示例代码可以帮助开发者理解如何在.NET环境中结合XML和AJAX实现前后端通信,以及如何构建一个高效、无刷新的省市县三级联动功能。对于初学者来说,这是一个很好的实践案例,有助于深入理解Web开发中的异步交互和...
"ajax,jsp,servlet无刷新实现级联效果"是一个常见的应用场景,主要涉及的技术包括Ajax(异步JavaScript和XML)、Java Servlet以及JSP(JavaServer Pages)。在这个场景中,我们将探讨如何通过这些技术实现在网页上...
"无刷新树"是基于Ajax技术实现的一种用户界面元素,通常用于展示层级结构的数据,如文件系统、组织结构或导航菜单。在不刷新整个页面的情况下,用户可以展开、折叠节点,获取新的数据,提供流畅的用户体验。 Ajax无...
"iframe实现无刷新上传下载"是一个利用IFrame和JQuery技术来创建的项目,它允许用户在不刷新整个页面的情况下进行文件的上传和下载操作,提高了交互效率,同时也保持了页面状态的连续性。 首先,我们要理解什么是...
**Ajax无刷新分页技术详解:结合jQuery与Json** 在Web开发中,用户界面的响应性和用户体验至关重要。传统的网页分页通常需要用户点击分页按钮后加载整个新页面,这可能导致页面跳转的延迟,降低了用户的浏览体验。...
本文将深入探讨如何使用Ajax实现无刷新的图片切换,并介绍AjaxPro这个库的使用方法。 一、Ajax实现图片切换 1. 前端HTML结构:首先,我们需要在HTML中创建一个图片容器,包含多个图片元素,但初始时只显示第一张...