实现AJAX局部刷新以及PageMethod方法的使用

时间：2022-09-23 16:09:19
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="../Scripts/jquery-2.1.1.js"></script>

    <script type="text/javascript">

        //1. 使用PageMethod 方法

        function GetBankName1() {

            var Account = document.getElementById("TextBox1").value;

            PageMethods.GetBankNameByAccount(Account, onSucceed);

        }

        function onSucceed(result) {

            document.getElementById("Label1").innerText = result;

        }

        //2. 使用AJAX 一部刷新

        function GetBankName2() {

            var Account = $("#TextBox1").val();

            $.ajax({

                type: "Post",

                url: "GetDataFromDB.aspx/GetBankNameByAccount",

                //data: "{'Account':'" + Account + "','Name':'" + 456 + "'}",

                data: "{'Account':'" + Account + "'}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    document.getElementById("Label1").innerText = data.d;

                }

            });

        }

        //3. 使用一般的XML请求

        function GetBankName3() {

            var xmlhttp;

            if (window.XMLHttpRequest) {

                xmlhttp = new XMLHttpRequest();

            }

            else {

                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

            xmlhttp.onreadystatechange = function (data) {

                if (xmlhttp.readyState ==  && xmlhttp.status == ) {

                    //document.getElementById("Label1").innerText = xmlhttp.responseText;

                    alert(data);

                }

            }

            var Account = document.getElementById("TextBox1").value;

            xmlhttp.open("post", "GetDataFromDB.aspx/GetName", true);

            xmlhttp.send();

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

            Account Number:

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

            Bank Name:<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

            <br />

            <input id="Button1" type="button" value="Use Page Method" onclick="GetBankName1();" /><br />

            <input id="Button2" type="button" value="Use AJAX" onclick="GetBankName2();" />

             <input id="Button3" type="button" value="Use XML Request" onclick="GetBankName3();" />

        </div>

    </form>

</body>

</html>

后台代码：

public partial class GetDataFromD : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            Label2.Text = DateTime.Now.ToString();//检测是否实现了局部刷新

        }

        [WebMethod]

        public static string GetBankNameByAccount(int Account)

        {

            string BankName = "";

            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString))

            {

                conn.Open();

                string sql = "select Name from  customers where id=@Account";

                SqlCommand cmd = new SqlCommand(sql,conn);

                SqlParameter p = new SqlParameter("@Account",Account);

                cmd.Parameters.Add(p);

                using (SqlDataReader r = cmd.ExecuteReader())

                {

                    if(r.Read())

                    {

                       BankName= r[].ToString();

                    }

                }

            }

            return BankName;

        }

        [WebMethod]

        public static string GetName()

        {

            return "Hello";

        }

    }

实现AJAX局部刷新以及PageMethod方法的使用的更多相关文章

  1. ajax局部刷新

    //5秒刷新一次 $(function () { setInterval(Refresh, 5000); }); //ajax局部刷新 function Refresh() { $.ajax({ ty ...

  2. php Ajax 局部刷新

    php Ajax 局部刷新: HTML部分 </head> <body> <h1>Ajax动态显示时间</h1> <input type=&quo ...

  3. thickbox关闭子页后ajax局部刷新父页

    1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...

  4. 用户登录ajax局部刷新验证码

    用户登录的时候,登录页面附带验证码图片,用户需要输入正确的验证码才可以登录,验证码实现局部刷新操作. 效果如图: 代码如下: #生成验证码及图片的函数  newcode.py import rando ...

  5. Ajax局部刷新（使用JS操作）

    对于在不使用Ajax的情况下,使用JS来进行局部刷新,主要有如下的几步: 1. 得到XMLHttpRequest 2. 使用open方法打开连接 3. 设置请求头信息 4. 注册onreadystat ...

  6. Ajax 局部刷新 异步提交

    AJAX简介 局部刷新,异步提交. AJAX 不是新的编程语言,而是一种使用现有标准的新方法.它最大的有点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 浏览器朝后端发送请 ...

  7. 两种局部刷新UITableView的方法的使用条件

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ //1.取消选 ...

  8. ajax局部刷新后，如何让局部中的百度分享重新加载

    我这个人不怎么喜欢说太多话,看几个图你们就懂了 Ajax前 Ajax之后 原因分析 解决方法 收工 百度分享是集成了众多主流第三方网站分享和收藏按钮的工具. 通过百度分享轻松将主流第三方网站的分享按钮 ...

  9. ajax局部刷新后里面的jquery事件失效的解决方法

    live() 与bind()作用基本一样. 最重要区别:live()可以将事件绑定到当前和将来的元素(eg:为id=zy元素绑定点击事件,而当你用js动态生成一个节点并插入到dom文档结构中时,如果你 ...

随机推荐

  1. JQuery中的extend函数

    1.jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件). 例如:增加两个插件方法. jQuery.fn.extend({ check: fu ...

  2. bzoj2716

    感人肺腑pascal过不去系列(可能是自己弱,因为有pascal过去了毕竟)那个这种平面点还有一种处理方法是kd tree,太弱了不会有时间学一下我还是用了cdq分治,首先肯定要把绝对值这个不和谐的东 ...

  3. js获取后台json数据显示在jsp页面元素

    jsp id <font size=2 >Today:</font> <font id ="todaytotal" size=2 color=&quo ...

  4. js中set和get的用法

    get 语句作为函数绑定在对象的属性上,当访问该属性时调用该函数. set 语法可以将一个函数绑定在当前对象的指定属性上,当那个属性被赋值时,你所绑定的函数就会被调用. eg: var log = [ ...

  5. 大叔力量VIP介绍

    VIP介绍 框架技术点 平台 仓储 日志收集 缓存 消息队列 服务总线 事务 任务调度 授权 模块化 服务发现 .net ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ - .net core ✔ ✔ ✔ ✔ ✔ ...

  6. 如何将一个HTML页面嵌套在另一个页面中

    一 在原页面嵌入其他页面 1.使用iframe框架 客户端页面嵌套可以使用iframe的方法,弊端是必须事先想好被嵌套的页面在首页中要占多大的位置. 如果被嵌套页面太大,超过事先定义的宽度或高度,则首 ...

  7. Java基础-Collection子接口之Set接口

    Java基础-Collection子接口之Set接口 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 学习Collection接口时,记得Collection中可以存放重复元素,也可 ...

  8. Java 内存模型基础

    一.并发编程模型的两个关键问题 1. 线程之间如何通信 通信是指线程之间以何种机制来交换信息. 在命令式编程中,线程之间的通信机制有两种:共享内存和消息传递. 在共享内存的并发模型里,线程之间共享程序 ...

  9. MongoDB入门（6）- 我们自己封装的MongoDB-C&num;版本

    Wisdombud.Mongo 包含内容 MongoDB.Bson.dll MongoDB.Bson.xml MongoDB.Driver.dll MongoDB.Driver.xml Wisdomb ...

  10. 使用JMAP dump及分析dump文件

    查看整个JVM内存状态 jmap -heap [pid]要注意的是在使用CMS GC 情况下,jmap -heap的执行有可能会导致JAVA 进程挂起 查看JVM堆中对象详细占用情况jmap -his ...

相关文章