效果:

对应的文档结构

Test.aspx 前台代码

  1. 引入JQuery(jquery-1.8.3.min.js)。
  2. 引入自己所写的JS代码(UserJS.js)。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/UseJS.js"></script>
<style type ="text/css">
#table1 {
margin:0 auto;
}
#table1 tr, #table1 tr th, #table1 tr td{
border:1px solid #ff6a00;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table id ="table1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Score</th>
</tr>
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td><%#Eval("ID") %></td>
<td><%#Eval("Name") %></td>
<td class ="Score"><%#Eval("Score") %></td>
</tr>
</ItemTemplate> </asp:Repeater>
</table>
</form>
</body>
</html>

  

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 type='text' value=" + Oldvalue + ">");//保存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
{
/// <summary>
/// Ajax 的摘要说明
/// </summary>
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;
}
}
}
}

  

  

Ajax - 异步处理(点击变成文本框并修改)的更多相关文章

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

    1.input文本框禁止修改文本 disabled属性:<input type="text" name="name" value="xxx&qu ...

  2. zTree中 checkbox 点击向文本框中赋值

    例子如下:第一个 文本框: <div class="content_wrap" style="height: 0;position: relative; " ...

  3. Selenium_按钮的点击、文本框的输入和清除操作(3)

    from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...

  4. JQ 点击指定文本框显示div。点击其他区域隐藏DIV

    <input id="username" type="text" style="width:90%;margin-top: 40px;" ...

  5. Android点击EditText文本框之外任何地方隐藏键盘的解决办法

    1,实现方法一:通过给当前界面布局文件的父layout设置点击事件(相当于给整个Activity设置点击事件),在事件里进行键盘隐藏 <LinearLayout xmlns:android=&q ...

  6. mvc ---- ajax 提交 (ckeditor)富文本框 提示潜在危险 Request.Form

    ajax 提交 ckeditor 中的内容怎么提交都提交不了,折腾半天,后来终于找到问题 在你的方法头上加 [HttpPost] [ValidateInput(false)] public Actio ...

  7. easyui 点击combox 文本框 显示下拉 panel

    $(".combo-text").click(function () { var mid = $(this).parent().parent().find("select ...

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

    search.jsp(WebContent/jsp/search.jsp) <%@ page language="java" contentType="text/h ...

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

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

随机推荐

  1. Gradle构建Java Web应用:Servlet依赖与Tomcat插件(转)

    Gradle的官方tutorial介绍了构建Java Web应用的基本方法.不过在使用Servlet做上传的时候会碰到问题.这里分享下如何通过Servlet上传文件,以及如何使用Gradle来构建相应 ...

  2. 基于visual Studio2013解决算法导论之049活动选择问题

     题目 活动选择问题 解决代码及点评 // 活动选择问题.cpp : 定义控制台应用程序的入口点. // #include<iostream> #define N 100 using ...

  3. 基于visual Studio2013解决C语言竞赛题之0423比赛安排

       题目

  4. Java NIO与IO

    当学习了Java NIO和IO的API后,一个问题立即涌入脑海: 我应该何时使用IO,何时使用NIO呢?在本文中,我会尽量清晰地解析Java NIO和IO的差异.它们的使用场景,以及它们怎样影响您的代 ...

  5. 常见的transformation 和 Action

    常见transformation map 将RDD中的每个元素传入自定义函数,获取一个新的元素,然后用新的元素组成新的RDD filter 对RDD中每个元素进行判断,如果返回true则保留,返回fa ...

  6. 设置VIM的配色方案

    [转]Ubuntu的VIM的默认颜色难看死了,蓝色的注释基本上看不到. 查看有多少配色方案: $ ls /usr/share/vim/vim72/colors  发现有以下文件 blue.vim    ...

  7. C++变量(C++变量定义、变量赋值、命名规则)

    其实在前面的例子中已经多次用到了变量.在程序运行期间其值可以改变的量称为变量.一个变量应该有一个名字,并在内存中占据一定的存储单元,在该存储单元中存放变量的值.请注意区分变量名和变量值这两个不同的概念 ...

  8. QLineEdit 仿QQ签名框

    今天鼓捣了半天,终于实现了自定义Qt中的QlineEdit控件的大致效果. 这个问题对于新手而言,主要有以下几个难点: 1.继承QLineEdit控件 2.QSS设置QLineEdit的相关样式,可以 ...

  9. WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇]

    原文:WCF技术剖析之二十二: 深入剖析WCF底层异常处理框架实现原理[中篇] 在[上篇]中,我们分别站在消息交换和编程的角度介绍了SOAP Fault和FaultException异常.在服务执行过 ...

  10. HDU4544 湫湫系列故事――消灭兔子

    HDU 4544 Tags: 数据结构,贪心 Analysis: 将兔子的血量从大到小排序,将箭的杀伤力从大到小排序,对于每一个兔子血量, 将比他大的杀伤力大的剑压入优先队列,优先队列自己重写,让它每 ...