源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

探讨jQuery的ajax使用场景(c#)

  • 时间:2021-03-10 06:34 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:探讨jQuery的ajax使用场景(c#)
[b]一:jQuery.ajax语法基础[/b] jQuery.ajax([options]) 概述:通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。使用这个方法可以获得更多的灵活性。 [b]数据类型 [/b]$.ajax()函数依赖服务器提供的信息来处理返回的数据。通过dataType选项还可以指定其他不同数据处理方式。其中,text和xml类型返回的数据不会经过处理。如果指定为html类型,任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。如果指定为json类型,则会把获取到的数据作为一个JavaScript对象来解析,并且把构建好的对象作为结果返回。发送数据到服务器,默认情况下,Ajax请求使用GET方法。如果要使用POST方法,可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。 [b]使用场景一: [/b]描述:保存数据到服务器,成功时显示信息。jQuery 代码: $.ajax({    type: "POST",    url: "some.php",    data: "name=John&location=Boston",    success: function(msg){      alert( "Data Saved: " + msg );    } }); [b]使用场景二: [/b]描述:装入一个 HTML 网页最新版本。jQuery 代码: $.ajax({   url: "test.html",   cache: false,   success: function(html){     $("#results").append(html);   } }); load(url, [data], [callback]) 概述:载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。 [b]使用场景一: [/b]描述:加载 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); }); 上面是基本的语法,我们只是先做一个了解,要是你已经熟悉,那么我们将开始一步一步对上面的方法和使用场景进行具体讨论。 [b]二:jQuery.ajax伴随ASP.NET的实战练习[/b] 首先创建Default.aspx页面,作为请求发起页面,并会获得返回值。页面的代码Default.aspx是:
[u]复制代码[/u] 代码如下:
<%@ 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页面代码:
[u]复制代码[/u] 代码如下:
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静态页面的代码是:
[u]复制代码[/u] 代码如下:
<!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>
当静态页面被请求后,会作为html的格式返回客户端,使用 $("#resulthtml").append(html);这样的方法来显示test.htm静态页面的内容。 TextJson.txt里面保存着一段文本,是json格式的: {   "key1": "刘明丰",   "key2": "林望",   "key3": "陈文杰",   "key4": "耿殿佳" } 在被访问后返回的是json格式的数据,在客户端获得json后会自动转换成对象。 好了,jQuery的异步使用场景基本满足我们的需求,自己试试看吧。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部