A 使用JQuery 的load( ) 方法
使用load( ) 方法发送异步数据,返回的数据不需要用户考虑是文本还是XML,JQuery 都会自动进行处理。示例如下:
客户端(14-1.html ):
< html > |
< head > |
< title > jQuery简化Ajax步骤 < /title > |
<script language="javascript" src="jquery.min.js"></script> |
< script language = " javascript " > |
function startRequest() { |
$( " #target " ) . load ( " 14-1.aspx " ) ; |
} |
</script> |
< /head > |
< body > |
< input type = " button " value = " 测试异步通讯 " onClick = " startRequest() " > |
< br > < br > |
< div id = " target " > < /div > |
< /body > |
< /html > |
服务器端(14-1.aspx ):
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> |
<%@ Import Namespace="System.Data" %> |
<% |
Response . Write( " 异步测试成功,很高兴 " ); |
%> |
注意:如果服务器端返回的是XML 格式的数据,在客户端也会自动实现正确显示。
B 使用JQuery 的 $.get( ) 和 $.post( ) 方法
客户端(14-5.html ):
< html > |
< head > |
< title > GET VS. POST < /title > |
<script language="javascript" src="jquery.min.js"></script> |
< script language = " javascript " > |
function createQueryString() { |
var firstName = encodeURI($( " #firstName " ) . val()) ; |
var birthday = encodeURI($( " #birthday " ) . val()) ; |
/ / 组合成对象的形式 |
var queryString = { firstName : firstName,birthday : birthday } ; |
return queryString ; |
} |
function doRequestUsingGET() { |
$ . get( " 14-5.aspx " ,createQueryString(), |
/ / 发送GET请求 |
function (data) { |
$( " #serverResponse " ) . html(decodeURI(data)) ; |
} |
) ; |
} |
function doRequestUsingPOST() { |
$ . post( " 14-5.aspx " ,createQueryString(), |
/ / 发送POST请求 |
function (data) { |
$( " #serverResponse " ) . html(decodeURI(data)) ; |
} |
) ; |
} |
</script> |
< /head > |
< body > |
< h2 > 输入姓名和生日 < /h2 > |
< form > |
< input type = " text " id = " firstName " / > < br > |
< input type = " text " id = " birthday " / > |
< /form > |
< form > |
< input type = " button " value = " GET " onclick = " doRequestUsingGET(); " / > < br > |
< input type = " button " value = " POST " onclick = " doRequestUsingPOST(); " / > |
< /form > |
< div id = " serverResponse " > < /div > |
< /body > |
< /html > |
服务器端(14-5.aspx ):
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> |
<%@ Import Namespace="System.Data" %> |
<% |
if ( Request . HttpMethod = = " POST " ) |
Response . Write( " POST: " + Request [ " firstName " ] + " , your birthday is " + Request [ " birthday " ]); |
else if ( Request . HttpMethod = = " GET " ) |
Response . Write( " GET: " + Request [ " firstName " ] + " , your birthday is " + Request [ " birthday " ]); |
%> |
C 使用JQuery 的 $.ajax( ) 方法
客户端(14-6.html ):
< html > |
< head > |
< title > $.ajax()方法 < /title > |
<script language="javascript" src="jquery.min.js"></script> |
< script language = " javascript " > |
function createQueryString() { |
/ / 必须两次编码才能解决中文问题 |
var firstName = encodeURI(encodeURI($( " #firstName " ) . val())) ; |
var birthday = encodeURI(encodeURI($( " #birthday " ) . val())) ; |
/ / 组合成对象的形式 |
var queryString = " firstName= " + firstName + " &birthday= " + birthday ; |
return queryString ; |
} |
function doRequestUsingGET() { |
$ . ajax( { |
type : " GET " , |
url : " 14-5.aspx " , |
data : createQueryString(), |
success : function (data) { |
$( " #serverResponse " ) . html(decodeURI(data)) ; |
} |
} ) ; |
} |
function doRequestUsingPOST() { |
$ . ajax( { |
type : " POST " , |
url : " 14-5.aspx " , |
data : createQueryString(), |
success : function (data) { |
$( " #serverResponse " ) . html(decodeURI(data)) ; |
} |
} ) ; |
} |
</script> |
< /head > |
< body > |
< h2 > 输入姓名和生日 < /h2 > |
< form > |
< input type = " text " id = " firstName " / > < br > |
< input type = " text " id = " birthday " / > |
< /form > |
< form > |
< input type = " button " value = " GET " onclick = " doRequestUsingGET(); " / > < br > |
< input type = " button " value = " POST " onclick = " doRequestUsingPOST(); " / > |
< /form > |
< div id = " serverResponse " > < /div > |
< /body > |
< /html > |
服务器端(14-5.aspx ):
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> |
<%@ Import Namespace="System.Data" %> |
<% |
if ( Request . HttpMethod = = " POST " ) |
Response . Write( " POST: " + Request [ " firstName " ] + " , your birthday is " + Request [ " birthday " ]); |
else if ( Request . HttpMethod = = " GET " ) |
Response . Write( " GET: " + Request [ " firstName " ] + " , your birthday is " + Request [ " birthday " ]); |
%> |
$.ajax( options )方法的参数非常地多,涉及Ajax 的方方面面,需要自己多多参考和实践。
注意:如果需要传递中文数据,必须进行两次encodeURI( ) 编码。
作者: XuGang 网名:钢钢 |
出处: http://xugang.cnblogs.com |
|