这次给大家带来jquery实现异步刷新,jquery实现异步刷新的注意事项有哪些,下面就是实战案例,一起来看一下。
最近要用到jquery进行异步读取数据的功能,jquery提供了许多内置的异步读取函数,给大家演示下最常用的$.ajax用法
在客户端文本框输入一个内容,然后在服务器端返回时间
在demo中要用到ashx文件,用于获取服务器的信息
效果图片
escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。
客户端代码
<%@ page language="c#" autoeventwireup="true" codefile="default7.aspx.cs" inherits="default7" %>
<!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">
<mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>
<title></title>
<mce:script type="text/javascript"><!--
function getdata() {
if ($('#text1').val() == '') {
alert('请输入内容!');
return;
}
$.ajax({
type: "get",
url: "contenthandler.ashx?name=" + $('#text1').val(),
cache: false,
data: { sex: "男" },
success: function(output) {
if (output == "" || output == undefined) {
alert('返回值为空!');
}
else {
output = eval("(" + output + ")");
$('#pmsg').html("姓名:" + output.name + "----" + "日期:" + output.dt);
}
},
error: function(xmlhttprequest, textstatus, errorthrown) {
alert("获取数据异常");
}
});
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<p>
ajax使用demo
</p>
<p>
<input id="text1"
type="text" />
<input id="button1" type="button" value="获取数据" onclick="getdata()"/>
</p>
<p id='pmsg'>
</p>
</form>
</body>
</html>
服务器端代码
<%@ webhandler language="c#" class="contenthandler" %>
using system;
using system.web;
public class contenthandler : ihttphandler {
public void processrequest (httpcontext context) {
string output = ;
string name = context.request.params[name];
output = getjsondata(name);
context.response.contenttype = text/plain;
context.response.write(output);
}
public bool isreusable {
get {
return false;
}
}
public string getjsondata(string aa)
{
string result = {name:/+aa+/,dt:/+datetime.now.tostring()+/};
return result;
}
}
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
jquery有哪些方法终止ajax请求
asp处理json数据步骤详解
以上就是jquery实现异步刷新的详细内容。