您的当前位置：首页 jQuery实现异步刷新

jQuery实现异步刷新

来源：匠吉游戏

这次给大家带来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; 
 } 
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！