实现AJAX局部刷新以及PageMethod方法的使用
<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方法的使用的更多相关文章
- ajax局部刷新
//5秒刷新一次 $(function () { setInterval(Refresh, 5000); }); //ajax局部刷新 function Refresh() { $.ajax({ ty ...
- php Ajax 局部刷新
php Ajax 局部刷新: HTML部分 </head> <body> <h1>Ajax动态显示时间</h1> <input type=&quo ...
- thickbox关闭子页后ajax局部刷新父页
1. 首先注意需要调用thickbox的js <script type="text/javascript" src="<%=path%>/js/jque ...
- 用户登录ajax局部刷新验证码
用户登录的时候,登录页面附带验证码图片,用户需要输入正确的验证码才可以登录,验证码实现局部刷新操作. 效果如图: 代码如下: #生成验证码及图片的函数 newcode.py import rando ...
- Ajax局部刷新（使用JS操作）
对于在不使用Ajax的情况下,使用JS来进行局部刷新,主要有如下的几步: 1. 得到XMLHttpRequest 2. 使用open方法打开连接 3. 设置请求头信息 4. 注册onreadystat ...
- Ajax 局部刷新 异步提交
AJAX简介 局部刷新,异步提交. AJAX 不是新的编程语言,而是一种使用现有标准的新方法.它最大的有点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 浏览器朝后端发送请 ...
- 两种局部刷新UITableView的方法的使用条件
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ //1.取消选 ...
- ajax局部刷新后，如何让局部中的百度分享重新加载
我这个人不怎么喜欢说太多话,看几个图你们就懂了 Ajax前 Ajax之后 原因分析 解决方法 收工 百度分享是集成了众多主流第三方网站分享和收藏按钮的工具. 通过百度分享轻松将主流第三方网站的分享按钮 ...
- ajax局部刷新后里面的jquery事件失效的解决方法
live() 与bind()作用基本一样. 最重要区别:live()可以将事件绑定到当前和将来的元素(eg:为id=zy元素绑定点击事件,而当你用js动态生成一个节点并插入到dom文档结构中时,如果你 ...
随机推荐
- 解决一个Android Studio gradle的小问题
自从Android Studio有了gradle之后,就经常有问题,最近在Ubuntu上用Android Studio的时候就遇到一个问题,每次项目目录更改了,Import项目,打开项目,还是新建项目 ...
- Mad Lib程序
单选框 复选框 按钮 标签 文本框的应用 #coding=utf-8 __author__ = 'minmin' from Tkinter import * class Application ...
- Windows 8.1 正式版微软官方原版镜像下载(新增10/17新版下载)
中文版:中国区OEM预装版本,特定国家版,锁定语言,其它功能和核心版没有区别.简体中文单语言版:锁定语言,其它功能和核心版没有区别.专业版+核心版[零售版][推荐]:镜像内包含专业版(Professi ...
- Git怎样同一时候删除多个仓下的同一个分支
每次下载完代码我们都会在本地通过repo start my_local --all建立分支,这样我们下载的代码在每一个仓下都有一个名叫my_local的分支,有些时候我们因为须要还会建立其它分支,当我 ...
- python wsgi
什么是wsgi? wsgi是一个web组件的接口防范,wsgi将web组件分为三类:web服务器,web中间件,web应用程序 wsgi基本处理模式为:wsgi Server -> wsgi m ...
- SMACSS:一个关于CSS的最佳实践-2.Base Rules
回顾 在上一篇SMACSS:一个关于CSS的最佳实践-Overview中,讲到SMACSS将CSS Rules分为5个Categories: Base Layout Module State Them ...
- jQuery实现页面关键字搜索
<style type="text/css"> .highlight { background-color:yellow; } </style> <s ...
- zoj 1409 Communication System
/*如果要一个物体的多种属性,最好用结构体,不要用二维数组或者多维数组.用多维数组进行关键字排序很不稳定 */ /*给每个设备的所有价格排序,每个设备选取恰好比已知带宽大的价格(这个时候的比例最大) ...
- Java 重写(Override)与重载(Overload)
1.重写(Override) 重写是子类对父类的允许访问的方法的实现过程进行重新编写!返回值和形参都不能改变.即外壳不变,核心重写! 参数列表和返回值类型必须与被重写方法相同. 访问权限必须低于父类中 ...
- git学习基础教程
分享一个git学习基础教程 http://pan.baidu.com/s/1o6ugkGE 具体在网盘里面的内容..需要的学习可以直接下.