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

最新推荐文章于 2024-05-05 23:59:37 发布

houshen

最新推荐文章于 2024-05-05 23:59:37 发布

阅读量323

点赞数

文章标签： ajax jquery input button javascript function

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

houshen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 学习笔记[七] AJAX 与JQuery 框架

A 使用JQuery 的load( ) 方法使用load( ) 方法发送异步数据，返回的数据不需要用户考虑是文本还是XML，JQuery 都会自动进行处理。示例如下：客户端（14-1.html ）：html>head>
复制链接

扫一扫