效果：

对应的文档结构：

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. Java网络蜘蛛/网络爬虫 Spiderman

    Spiderman - 又一个Java网络蜘蛛/爬虫 Spiderman 是一个基于微内核+插件式架构的网络蜘蛛,它的目标是通过简单的方法就能将复杂的目标网页信息抓取并解析为自己所需要的业务数据. 主 ...

  2. csu1306: Manor

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1306 解题思路:唬人的水题,只要按照他的意思打,就能过,不过,数组最好开大点.用到优先队列,也可以 ...

  3. Web端的Tab控件在切换Tab时Load数据出错的处理

    我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错 ...

  4. Python 数据分析（二 本实验将学习利用 Python 数据聚合与分组运算，时间序列，金融与经济数据应用等相关知识

    Python 数据分析(二) 本实验将学习利用 Python 数据聚合与分组运算,时间序列,金融与经济数据应用等相关知识 第1节 groupby 技术 第2节 数据聚合 第3节 分组级运算和转换 第4 ...

  5. The Apache™ Batik Project

    Apache(tm) Batik SVG Toolkit - a Java-based toolkit for applications or applets that want to use ima ...

  6. 浅谈初次搭建nginx+php+mysql遇到的问题

    先说明下我linux上的环境: nginx + php(5.5.10) + mysql 開始的源代码已经在本地写好,并调试成功(本地的环境是用XAMPP的默认配置).在把代码上传至linux上时,出现 ...

  7. java环境变量配置问题

    你要配置三个环境变量JAVA_HOMECLASSPATHPath你都配置了吗? 系统变量→新建 JAVA_HOME 变量 .变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0) 系统 ...

  8. EFM32在使用IAR开发环境配置ICf文件以及指定程序存储地址空间

    EFM32在IAR开发环境下指定代码,数据的存储空间 为了便于后续的项目升级,管理,需要对代码,数据的存储空间加以设定,也在网上找下相关的资料,笔者水平有限, 如下内容不一定完全正确,如有错误之后,还 ...

  9. Delphi XE7下如何创建一个Android模拟器调试

    利用Delphi XE7我们可以进行多种设备程序的开发,尤其是移动开发应用程序得到不断地加强.在实际的Android移动程序开发中,如果我们直接用android真机直接调试是非常不错.一是速度快,二是 ...

  10. 《WCF技术剖析》博文系列汇总[持续更新中]

    原文:<WCF技术剖析>博文系列汇总[持续更新中] 近半年以来,一直忙于我的第一本WCF专著<WCF技术剖析(卷1)>的写作,一直无暇管理自己的Blog.在<WCF技术剖 ...