今天与大家分享"最简单的asp.net ajax post",只适用于初学者。
开讲:
如题,众所周知,asp.net要实现无刷新效果一般都使用ajax,网上也有很多资料,但是我想把这个简单的例子记录下来,所以就来博客园写一篇随笔了,入正题...
看下前台代码:
Html And Js
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Jquery.admin.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo</title>
<link href="Css/adminindex.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//创建XHLHttpRequest
function creatXMLHttpRequest()
{
//IE浏览器
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
return new XMLHttpRequest();
}
}
//单击按钮
function LookUser()
{
var xhr = creatXMLHttpRequest();
var url = "GetData.ashx";
var id=document.getElementById("txtuserid").value;
//拼接字符串用于传到后台处理程序,必须用escape转码,否则会出现乱码
var canshu = "userid=" + escape(id);
//处理成功后执行的方法
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
document.getElementById("userinfo").innerHTML=xhr.responseText;
}
}
xhr.open("POST", url, true);
//设置头部信息才能被服务器通过POST方式调用
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送请求
xhr.send(canshu);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txtuserid" runat="server" Width="150px" Height="22px"></asp:TextBox>
<button type="button" onclick="LookUser()" style="height: 30px; 80px;">查看用户</button><br /><br />
<div id="userinfo">
</div>
</form>
</body>
</html>
其中有一个GetData.ashx是用来处理程序的并返回字符串
实现效果如图
很简单,也没啥要说的,就这样...
PS:Tandy Tang祝大家在新的一年(2012)里写代码写的愉快!