软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 网络编程 > ASP教程 > JQuery中Ajax进行无刷新修改类别的办法

JQuery中Ajax进行无刷新修改类别的办法

  烈火网(LieHuo.Net)教程 用jQuery中的Ajax方法,进行无刷新修改类别(可以是任何数据)的办法。

  完整的操作流程:
  1:点击类别名称,赋给一个onclick事件。
  2:文字内容变成一个输入框,并且类别名称显示在输入框中。
  3:修改输入框的内容。
  4:点击页面其他地方时,输入框重新变回为文字,并且将用新输入的类别名取代之前的旧类别名。
  5:并将新的类别名更新到数据库,完成整个过程。

 aspx的页面代码如下,注意类别名要加一个class="canme",才方便用jquery来获取:

以下为引用的内容:
<tr>
<td height="25" align="center"><%# Eval("id") %></td>
<td height="25" align="center" class="caname"><%# Eval("name") %></td>
<tr>

 首先,在Web层新建一个js文件,拷贝如下代码:

以下为引用的内容:
/**//*
* 说明:用Jquery的方法,无刷新页面,编辑表格
*/

$(function() {
//给页面中有caname类的标签上加上click函数
$(".caname").click(function() {

var objTD = $(this);

//先将老的类别名称保存起来,并用trim方法去掉左右多余的空格
var oldText = $.trim(objTD.text());

//构造一个input的标签对象(作用是为了让这个input失效,不然点击多次后,文字会消失)
var input = $("<input type='text' value='" + oldText + "' />");

//当前td的内容变为文本框,并且把老类别名放进去
objTD.html(input);

//设置文本框的点击事件失效
input.click(function() {
return false;
});

//设置文本框样式,让界面显示的人性化点
input.css("font-size", "16px");
input.css("text-align", "center");
input.css("background-color", "#F7F2DE");
input.width("120px");

//自动选中文本框中的文字
input.select();

//文本框失去焦点时重新变为文本
input.blur(function() {

//获得新输入的类别名
var newText = $(this).val();

//用新的类别名文字替换之前变过来的输入框状态
objTD.html(newText);

//获取该类别名所对应的ID(caId)
var caId = objTD.prev().text();

//将新的类别名进行转码,不然界面以及数据库显示的都是"???"这样的乱码
newText = escape(newText);

//获取要传到"一般处理文件"(ChangeCaName.ashx)中的URL
var url = "../handler/ChangeCaName.ashx?caid=" + caId + "&caname=" + newText;

//AJAX异步更改数据库,data为成功后的回调返回值,用于显示提示信息
$.get(url, function(data) { alert(data) });

});
});
});

相关阅读
栏目导航
推荐软件