您的位置：首页 > Web前端 > JQuery

AJAX 学习笔记[七] AJAX 与JQuery 框架

2011-08-18 18:07 537 查看

A 使用JQuery 的load( ) 方法

使用load( ) 方法发送异步数据，返回的数据不需要用户考虑是文本还是XML，JQuery 都会自动进行处理。示例如下：

客户端（14-1.html ）：

<html>

<head>

<title>jQuery简化Ajax步骤</title>

function startRequest(){

$("#target").load("14-1.aspx");

}

</script>

</head>

<body>

</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>

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>

</form>

<form>

</form>

</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>

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>

</form>

<form>

</form>

</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( ) 编码。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航