实现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文档结构中时,如果你 ...
随机推荐
- jQuery入门第三
jQuery入门第三 1.HTML 2.CSS 衣服 3.javascript 可以动的人 4.DOM 编程 对html文档的节点操作 5.jQuery 对 javascript的封装 简练的语法 复 ...
- Ubuntu12.04获取root权限
有的时候我们需要Ubuntu的root权限,我们该如何获取呢? 其实,很简单,我们只需要在终端中输入以下命令即可获得root权限. 第一步,打开终端 ( ctrl+alt+T ) 第二步,输入命令:s ...
- Linux 网络编程基础（1）--网络相关的数据结构及转化函数
在Linux下进行网络编程,使用的语言一般为C.就个人感受而言,在Linux下进行网络程序的编写,重要的不是代码能力要多强,而是对Linux的网络编程思想的理解和对Linux网络数据结构的掌握.如果想 ...
- Linux cd命令
1: cd 不加任何参数,它会自动跳到用户的家目录中去! 2: ~ 表示用户的家目录 3: cd ~userNmae/ 这样可以进入指定用户的家目录中去! 4: cd - 跳到上一次所在的目 ...
- JAVA并发，经典死锁案例-哲学家就餐
转自:http://blog.csdn.net/tayanxunhua/article/details/38691005 死锁经典案例:哲学家就餐. 这个案例会导致死锁. 通过修改<Java编程 ...
- Zepto Api参考
zepto API参考 简介 Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 设计目的 ze ...
- java selenium webdriver实战 helloWord
第一步:建立Maven项目 Selenium 支持 maven 工程,这会让你的工作更加简便. 用 Eclipse 建个 Maven 的工程,建成后,修改 pom.xml <dependenci ...
- ruiy_ocfs2
http://docs.oracle.com/cd/E37670_01/E37355/html/ol_instcfg_ocfs2.html
- javascript的this指向
JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有 ...
- cocos2d-x-3.1 Text Labels（官方正式译文）
介绍 cocos2d支持(true type字体)标签,和纹理地图集标签. LabelTTF 标签的优缺点: 全部 TTF 字体的长处: 随意大小,支持调整字距. 易于使用. 不须要外部编辑器. 创建 ...