探討jQuery的ajax使用場景(c#)
一:jQuery.ajax語法基礎(chǔ)
jQuery.ajax([options])
概述:通過 HTTP 請求加載遠程數(shù)據(jù)。
jQuery 底層 AJAX 實現(xiàn)。簡單易用的高層實現(xiàn)見 $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對象。使用這個方法可以獲得更多的靈活性。
數(shù)據(jù)類型
$.ajax()函數(shù)依賴服務(wù)器提供的信息來處理返回的數(shù)據(jù)。通過dataType選項還可以指定其他不同數(shù)據(jù)處理方式。其中,text和xml類型返回的數(shù)據(jù)不會經(jīng)過處理。如果指定為html類型,任何內(nèi)嵌的JavaScript都會在HTML作為一個字符串返回之前執(zhí)行。如果指定為json類型,則會把獲取到的數(shù)據(jù)作為一個JavaScript對象來解析,并且把構(gòu)建好的對象作為結(jié)果返回。發(fā)送數(shù)據(jù)到服務(wù)器,默認情況下,Ajax請求使用GET方法。如果要使用POST方法,可以設(shè)定type參數(shù)值。這個選項也會影響data選項中的內(nèi)容如何發(fā)送到服務(wù)器。
使用場景一:
描述:保存數(shù)據(jù)到服務(wù)器,成功時顯示信息。jQuery 代碼:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
使用場景二:
描述:裝入一個 HTML 網(wǎng)頁最新版本。jQuery 代碼:
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
load(url, [data], [callback])
概述:載入遠程 HTML 文件代碼并插入至 DOM 中。
默認使用 GET 方式 - 傳遞附加參數(shù)時自動轉(zhuǎn)換為 POST 方式。
使用場景一:
描述:加載 feeds.html 文件內(nèi)容。jQuery 代碼:
$("#feeds").load("feeds.html");
jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])
概述:通過遠程 HTTP GET或POST 請求載入信息。
這是一個簡單的 GET或POST 請求功能以取代復(fù)雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。如果需要在出錯時執(zhí)行函數(shù),請使用 $.ajax。
描述:顯示 test.aspx 返回值(HTML 或 XML,取決于返回值),添加一組請求參數(shù)。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);
});
上面是基本的語法,我們只是先做一個了解,要是你已經(jīng)熟悉,那么我們將開始一步一步對上面的方法和使用場景進行具體討論。
二:jQuery.ajax伴隨ASP.NET的實戰(zhàn)練習(xí)
首先創(chuàng)建Default.aspx頁面,作為請求發(fā)起頁面,并會獲得返回值。頁面的代碼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靜態(tài)頁面和TextJson.txt。
response.aspx頁面:主要是在服務(wù)器端獲得客戶端提交的數(shù)據(jù),并返回數(shù)據(jù)給客戶端。
test.htm靜態(tài)頁面:主要是給客戶端局部裝入一個HTML網(wǎng)頁最新版本。
TextJson.txt:是作為數(shù)據(jù)儲存在文件中,讓客戶端來異步訪問的。
response.aspx頁面代碼,response.aspx是:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="response.aspx.cs" Inherits="JqueryAjax2.response" %>
沒有任何html代碼,因為主要是在服務(wù)器端獲得客戶端提交的數(shù)據(jù),并返回數(shù)據(jù)給客戶端,不需要顯示html內(nèi)容,所以可以不含html標(biāo)記。
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);
}
}
}
在代碼中可以看到服務(wù)器端獲得客戶端提交的數(shù)據(jù),并返回數(shù)據(jù)給客戶端的方式。
test.htm靜態(tài)頁面的代碼是:
<!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>
當(dāng)靜態(tài)頁面被請求后,會作為html的格式返回客戶端,使用 $("#resulthtml").append(html);這樣的方法來顯示test.htm靜態(tài)頁面的內(nèi)容。
TextJson.txt里面保存著一段文本,是json格式的:
{ "key1": "劉明豐", "key2": "林望", "key3": "陳文杰", "key4": "耿殿佳" }
在被訪問后返回的是json格式的數(shù)據(jù),在客戶端獲得json后會自動轉(zhuǎn)換成對象。
好了,jQuery的異步使用場景基本滿足我們的需求,自己試試看吧。
- jquery+ajax+C#實現(xiàn)無刷新操作數(shù)據(jù)庫數(shù)據(jù)的簡單實例
- div彈出層的ajax登錄(Jquery版+c#)
- 一個很簡單的jquery+xml+ajax的無刷新樹結(jié)構(gòu)(無css,后臺是c#)
- Javascript 直接調(diào)用服務(wù)器C#代碼 ASP.NET Ajax實例
- c# AJAX實踐VS2005 + RSSToolKit 開發(fā)你自己的RSS在線閱讀器
- asp.net(c#) MS AJAX的安裝
- c#分頁讀取GB文本文件實例
- C#拼接SQL語句 用ROW_NUMBER實現(xiàn)的高效分頁排序
- 基于jquery的分頁控件(C#)
- C#中常用的分頁存儲過程小結(jié)
- C#基于數(shù)據(jù)庫存儲過程的AJAX分頁實例
相關(guān)文章
Jquery中的offset()和position()深入剖析
jquery 中有兩個獲取元素位置的方法offset()和position(),這兩個方法之間有什么異同?使用的時候應(yīng)該注意哪些問題?什么時候使用offset(),什么時候又使用position()呢?2009-05-05jQuery事件模型默認行為執(zhí)行順序及trigger()與 triggerHandler()比較實例分析
這篇文章主要介紹了jQuery事件模型默認行為執(zhí)行順序及trigger()與 triggerHandler()比較,結(jié)合實例形式分析了jQuery事件模型默認行為執(zhí)行順序相關(guān)原理,以及trigger()與 triggerHandler()的異同點比較,需要的朋友可以參考下2020-04-04