jQuery使用$.ajax进行异步刷新的方法(附demo下载)
本文实例讲述了jQuery使用$.ajax进行异步刷新的方法。分享给大家供大家参考,具体如下:
最近要用到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 + ")");
$('#divmsg').html("姓名:" + output.name + "----" + "日期:" + output.dt);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("获取数据异常");
}
});
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
ajax使用demo
</div>
<div>
<input id="Text1"
type="text" />
<input id="Button1" type="button" value="获取数据" onclick="GetData()"/>
</div>
<div id='divmsg'>
</div>
</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程序设计有所帮助。
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
AJAX简介AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。您应当具备的基础知识在继续学习之前,您需要对下面的知识有基本的
简要了解jQuery移动web开发的响应式布局设计
响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着,无论用户是在移动、平板还是桌面设备上浏览Web页面,设计都将
jQuery移动web开发之页面跳转和加载外部页面的实现
changePage()页面跳转jQuery.mobile.changePage(to[,options])从一个页面跳转到另一个页面,使用$.mobile对象的changePage方法来实现。但要使用此方式的时候,要以点击
标签:页面,给大家,代码,跳转,数据