写一个ajax显示文本框,Ajax - 异步处理（点击变成文本框并修改）

效果：

对应的文档结构：

Test.aspx 前台代码：

引入JQuery(jquery-1.8.3.min.js)。

引入自己所写的JS代码(UserJS.js)。

#table1 {

margin:0 auto;

}

#table1 tr, #table1 tr th, #table1 tr td{

border:1px solid #ff6a00;

}

ID	Name	Score

Test.aspx.cs 前台页面对应的后台代码：

protected void Page_Load(object sender, EventArgs e)

{

string text = "select ID, Name, Score from Tb_Mark";

this.Repeater1.DataSource = SQLHelper.ExecuteTable(text, CommandType.Text);

this.Repeater1.DataBind();

}

UserJS.js 自己所写的JS代码：

$(function () {

//为每一个Class为Score的标签添加Click事件

$(".Score").click(function () {

var object = $(this);//保存对象

var Oldvalue = object.text();//获取文本框中的值

var input = $("");//保存input对象

object.html(input);//将上面所定义的文本框写入到界面

input.select();//将文本框中的内容处于选中状态

input.click(function () {//文本框的点击事件

return false;//使点击过后的文本框失效

})

//获取ID值

var ID = object.prev().prev().text();

//这个步骤是，将文本框中的值(不管是新值还是原始值)，重新变成文本显示

//同时也解决了，其他文本框为多选中的问题

input.blur(function () {//失去焦点事件

var NewValues = $(input).val();//获取文本框中的值

object.html(NewValues);//使文本框变为新值

//-----------------------------------------使用Ajax异步执行--------------------------------------------//

//Ajax异步执行

$.ajax({

type: "GET",

url: "../Handeler/Ajax.ashx",//用来指定要传递给哪个处理页面(不限于一般处理程序，也可以使aspx页面)。

data: "Value=" + encodeURI(NewValues) + "&ID=" + ID + "",//要传递的数据。

success: function (msg) {//接收后台程序的返回值。

if (!msg) {

alert("修改失败！");

}

}

});

//----------------------------------------------------------------------------------------------------//

});

})

})

Ajax.ashx 后台的一般处理程序代码：

如果使用 GET 传值，则使用 Request.QueryString["ID"].ToString(); 进行接收数据。

如果使用 POST 传值，则使用 Request.Form["ID"].ToString(); 进行接收数据。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using DAL;

namespace Shop.Handeler

{

///

/// Ajax 的摘要说明

///

public class Ajax : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

//Ajax异步执行

//$.ajax({

// type: "GET",

// url: "../Handeler/Ajax.ashx",//用来指定要传递给哪个处理页面(不限于一般处理程序，也可以使aspx页面)。

// data: "Value=" + encodeURI(NewValues) + "&ID=" + ID + "",//要传递的数据。

// success: function (msg) {//接收后台程序的返回值。

// if (!msg) {

// alert("修改失败！");

// }

// }

//});

string ID = context.Request.QueryString["ID"].ToString();

string value = context.Request.QueryString["Value"].ToString();

string text = "update Tb_Mark set Score = '" + context.Server.UrlDecode(value) + "' where ID = '" + ID + "'";

if (!(SQLHelper.ExecuteNonQuery(text, System.Data.CommandType.Text) == 1))

{

context.Response.Write(true);

}

else

{

context.Response.Write(false);

}

}

public bool IsReusable

{

get

{

return false;

}

}

}

}

input文本框禁止修改文本——disabled和readonly属性的作用及区别

1.input文本框禁止修改文本 disabled属性:

ajax实例及实现文本框异步搜素

search.jsp(WebContent/jsp/search.jsp)

js中点击空白区域时文本框与隐藏层的问题

当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. UB ...

js/jquery获取文本框的值与改变文本框的值

我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 function get1(){ document.getElementById("txtb ...

随机推荐

HTTP 错误 503.2 - Service Unavailable 正在超过 serverRuntime@appConcurrentRequestLimit 设置的值。

HTTP 错误 503.2 - Service Unavailable 正在超过 serverRuntime@appConcurrentRequestLimit 设置的值. dudu的解决办法:htt ...

在Mac上配置Android adb命令

一 adb定义: adb(android debug bridge)是android系统中的一种命令行工具,通过它可以和android设备或模拟器通信. 二 在Mac上的配置过程 启动终端 进入当前用 ...

九度OJ 1534 数组中第K小的数字 -- 二分查找

题目地址:http://ac.jobdu.com/problem.php?pid=1534 题目描述: 给定两个整型数组A和B.我们将A和B中的元素两两相加可以得到数组C. 譬如A为[1,2],B为[ ...

jdk1.5多线程Lock接口及Condition接口

jdk1.5多线程的实现的方式: jdk1.5之前对锁的操作是隐式的 synchronized(对象) //获取锁 { } //释放锁 jdk1.5锁的操作是显示的:在包java.util.concu ...

UWP 绘制图形

UWP图形和wpf变化不多 一般用到有椭圆.长方形.多边形.线 不过如果用的好,可以做出很漂亮的界面 一般使用画图都是使用Shape 类,Shape 类具有一个与其关联的画笔并可以呈现到屏幕,包括 L ...

java-面向对象的多态性摘要

多态的作用就是用来将接口和实现分离开,改善代码组织结构,增强代码可读性,便于代码的维护. 在java中,讨论多态就是讨论方法调用的绑定,绑定就是将一个方法调用同一个方法主体联系起来.在java中通常叫 ...

newcoder Tachibana Kanade Loves Probability(小数点后第k位)题解

题意:题目链接立华奏在学习初中数学的时候遇到了这样一道大水题: “设箱子内有 n 个球,其中给 m 个球打上标记,设一次摸球摸到每一个球的概率均等,求一次摸球摸到打标记的球的概率” “emmm...语 ...

2018SDIBT_国庆个人第七场

A - Complete the Word(暴力) Description ZS the Coder loves to read the dictionary. He thinks that a wo ...

【转】解决configure: error: C++ compiler cannot create executables问题

转自:http://www.coderbolg.com/content/83.html 啊……天啊,./configure时报错:configure: error: C++ compiler cann ...

GUI库之认识Tkinter(一)

一.介绍 Tkinter是Python默认的GUI库,我们经常使用的IDLE就是用Tkinter设计出来的,因此我们在使用的时候直接导入Tkinter模块就好了. 1.特点:可移植性.灵活性高 2.构 ...