jQuery的ajax使用场景讨论（c#）

最新推荐文章于 2025-04-08 15:54:06 发布

my98800

最新推荐文章于 2025-04-08 15:54:06 发布

阅读量289

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

171 篇文章

订阅专栏

本文介绍jQuery AJAX的基础语法及应用场景，包括使用POST方法保存数据、加载HTML文件、GET和POST请求等，并通过ASP.NET实战演示了AJAX的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：jQuery.ajax语法基础

jQuery.ajax([options])
概述：通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法可以获得更多的灵活性。
数据类型
$.ajax()函数依赖服务器提供的信息来处理返回的数据。通过dataType选项还可以指定其他不同数据处理方式。其中，text和xml类型返回的数据不会经过处理。如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。发送数据到服务器，默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。
使用场景一：
描述:保存数据到服务器，成功时显示信息。jQuery 代码:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
使用场景二：
描述:装入一个 HTML 网页最新版本。jQuery 代码:
$.ajax({
url: "test.html",
cache: false,
success: function(html){
    $("#results").append(html);
}
});

load(url, [data], [callback])
概述：载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
使用场景一：
描述:加载 feeds.html 文件内容。jQuery 代码:
$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])

概述：通过远程 HTTP GET或POST 请求载入信息。
这是一个简单的 GET或POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
描述:显示 test.aspx 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数。jQuery 代码:
$.get("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post("test.aspx", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

上面是基本的语法，我们只是先做一个了解，要是你已经熟悉，那么我们将开始一步一步对上面的方法和使用场景进行具体讨论。

二：jQuery.ajax伴随ASP.NET的实战练习

首先创建Default.aspx页面，作为请求发起页面，并会获得返回值。页面的代码Default.aspx是：

 
    
  

    <%@ Page Language= 
   " 
   C# 
   " AutoEventWireup= 
   " 
   true 
   " CodeBehind= 
   " 
   Default.aspx.cs 
   " Inherits= 
   " 
   JqueryAjax2._Default 
   " %> 
   
 <!DOCTYPE html PUBLIC  
   " 
   -//W3C//DTD XHTML 1.0 Transitional//EN 
   "  
   " 
   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 
   "> 
   
 <script src= 
   " 
   js\jquery-1.6.2.min.js 
   " type= 
   " 
   text/javascript 
   "></script> 
   
 <script type= 
   " 
   text/javascript 
   "> 
   
     $(function() { 
   
         $( 
   ' 
   #showinfo 
   ').click(function() { 
   
              
   var data = { key1:  
   " 
   刘明丰 
   ", key2:  
   " 
   林望 
   " }; 
   
             $.ajax({ 
   
                 type:  
   " 
   POST 
   ", 
   
                 url:  
   " 
   response.aspx 
   ", 
   
                 data: data, 
   
                 dataType:  
   " 
   text 
   ", 
   
                 success: function(msg) { 
   
                     $( 
   " 
   #ajax 
   ").append(msg); 
   
                 } 
   
             }); 
   
             $.ajax({ 
   
                 url:  
   " 
   test.htm 
   ", 
   
                 cache:  
   false, 
   
                 success: function(html) { 
   
                     $( 
   " 
   #resulthtml 
   ").append(html); 
   
                 } 
   
             }); 
   
             $( 
   " 
   #load 
   ").load( 
   " 
   test.htm 
   "); 
   
             $. 
   get( 
   " 
   response.aspx 
   ", data, success1,  
   " 
   text 
   "); 
   
             $. 
   get( 
   " 
   TextJson.txt 
   ", success3,  
   " 
   json 
   "); 
   
             $.post( 
   " 
   response.aspx 
   ", data, success2,  
   " 
   text 
   "); 
   
             function success1(message) { 
   
                 $( 
   " 
   #get 
   ").append(message); 
   
             } 
   
             function success2(message) { 
   
                 $( 
   " 
   #post 
   ").append(message); 
   
             } 
   
             function success3(siteData) { 
   
                  
   var result =  
   " 
   <li>334一号床: 
   " + siteData.key1 +  
   " 
   </li> 
   "; 
   
                 result +=  
   " 
   <li>334二号床: 
   " + siteData.key2 +  
   " 
   </li> 
   "; 
   
                 result +=  
   " 
   <li>334三号床:  
   " + siteData.key3 +  
   " 
   </li> 
   "; 
   
                 result +=  
   " 
   <li>334四号床:  
   " + siteData.key4 +  
   " 
   </li> 
   "; 
   
                 $( 
   " 
   #result 
   ").html(result); 
   
             } 
   
         }); 
   
     }); 
   
 </script> 
   
 <html xmlns= 
   " 
   http://www.w3.org/1999/xhtml 
   " > 
   
 <head runat= 
   " 
   server 
   "> 
   
     <title></title> 
   
 </head> 
   
 <body> 
   
 <input type= 
   " 
   button 
   " id= 
   " 
   showinfo 
   " value= 
   " 
   show info 
   "></input>  
   
      <ul id= 
   " 
   ajax 
   ">ajax:</ul> 
   
      <ul id= 
   " 
   resulthtml 
   ">resulthtml:</ul> 
   
      <ul id= 
   " 
   load 
   ">load:</ul>      
   
      <ul id= 
   " 
   get 
   "> 
   get:</ul> 
   
      <ul id= 
   " 
   post 
   ">post:</ul> 
   
      <ul id= 
   " 
   result 
   "></ul> 
   
       
   
 </body> 
   
 </html> 
  
 
    
  

Default.aspx.cs里面有没写任何代码，默认即可。
请求的接受者这里面有三种角色：response.aspx页面、test.htm静态页面和TextJson.txt。

response.aspx页面：主要是在服务器端获得客户端提交的数据，并返回数据给客户端。
test.htm静态页面：主要是给客户端局部装入一个HTML网页最新版本。
TextJson.txt：是作为数据储存在文件中，让客户端来异步访问的。

response.aspx页面代码，response.aspx是：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>

没有任何html代码，因为主要是在服务器端获得客户端提交的数据，并返回数据给客户端，不需要显示html内容，所以可以不含html标记。
response.aspx.cs页面代码：

 
   using System; 
   
   using System.Collections.Generic; 
   
   using System.Linq; 
   
   using System.Web; 
   
   using System.Web.UI; 
   
   using System.Web.UI.WebControls; 
   
   using System.Runtime.Serialization.Json; 
   
   using System.Runtime.Serialization; 
   
   namespace JqueryAjax2 
   
 { 
   
   public  
   partial  
   class response : System.Web.UI.Page 
   
     { 
   
   protected  
   void Page_Load( 
   object sender, EventArgs e) 
   
         { 
   
   string str = Request[ 
   " 
   key1 
   "]; 
   
             Response.Write( 
   " 
   success 
   " + str); 
   
         } 
   
     } 
   
 }

在代码中可以看到服务器端获得客户端提交的数据，并返回数据给客户端的方式。

test.htm静态页面的代码是：

 
    <!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> 
   
     <title></title> 
   
 </head> 
   
 <body> 
   
 test.html 
   
 </body> 
   
 </html>