jQuery.ajax()呼叫asp.net後台方法
利用JQuery的$.ajax()可以很方便的呼叫asp.net的後台方法。
先來個簡單的實例熱身吧。
1、無參數的方法呼叫
C#後台程式碼：
using System.Web.Services;
[WebMethod]
public static string sayHi()
{
return "Hi,Welcome to China!";
}注意：1.方法一定要靜態方法，而且要有[WebMethod]的宣告.
html程式碼：
<div>
<asp:Button ID="btnClick" runat="server" Text="click me" />
<br />
<span id="msg"></span>
</div>運行結果：
透過firebug能很清楚地看到json回傳的資料格式，所以在取資料的時候要data.d。
2、帶參數的方法呼叫
C#後台代碼：
<script type="text/javascript">
$(document).ready(
function() {
$("#btnClick").bind("click", function() {
$.ajax({
type: "post",
url: "ajaxHandler.aspx/sayHi",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$("#msg").css("color", "#0000FF").html(data.d);
},
error: function(err) {
$("#msg").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
});
});
</script>html代碼：
[WebMethod]
public static string sayHi(string address, string name)
{
return "Hi," + address + " " + name;
}jQuery代碼：
<div>
<asp:Button ID="btnClick" runat="server" Text="click me" />
address:<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
family name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<br />
<span id="msg"></span>
</div>
C#後台程式碼：
<script type="text/javascript">
$(document).ready(
function() {
$("#btnClick").bind("click", function() {
var add = $("#txtAddress").val();
var txtname = $("#txtName").val();
$.ajax({
type: "post",
url: "ajaxHandler.aspx/sayHi",
data: "{'address':'" + add + "','name':'" + txtname + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$("#msg").css("color", "#0000FF").html(data.d);
},
error: function(err) {
$("#msg").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
});
});
</script>
html程式碼：[WebMethod]
public static List<string> sayHi(string address, string name)
{
List<string> list = new List<string>();
for (int i = 0; i < 10; i++)
{
list.Add("Hi:" + i.ToString());
}
list.Add("Hi:" + address + " " + name);
return list;
}jQuery程式碼：
<div>
<asp:Button ID="btnClick" runat="server" Text="click me" />
address:<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
family name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<br />
<ul id="msg">
</ul>
</div>
.
<script type="text/javascript">
$(document).ready(
function() {
$("#btnClick").bind("click", function() {
var add = $("#txtAddress").val();
var txtname = $("#txtName").val();
$.ajax({
type: "post",
url: "ajaxHandler.aspx/sayHi",
data: "{'address':'" + add + "','name':'" + txtname + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$("#msg").html("");
$(data.d).each(function() {
$("#msg").append("<li>" + this + "</li>");
});
$("#msg").css("color", "#0000FF");
},
error: function(err) {
$("#msg").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
});
});
</script>[WebMethod]
public static SortedList<string, string> sayHi(string address, string name)
{
SortedList<string, string> sl = new SortedList<string, string>();
for (int i = 0; i < 10; i++)
{
sl.Add(i.ToString() + "_key", i.ToString() + "_value");
}
sl.Add("_key", "_value " + address + " " + name);
return sl;
}<div>
<asp:Button ID="btnClick" runat="server" Text="click me" />
address:<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
family name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<br />
<ul id="msg">
</ul>
</div>
<script type="text/javascript">
$(document).ready(
function() {
$("#btnClick").bind("click", function() {
var add = $("#txtAddress").val();
var txtname = $("#txtName").val();
$.ajax({
type: "post",
url: "ajaxHandler.aspx/sayHi",
data: "{'address':'" + add + "','name':'" + txtname + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$("#msg").html("");
//这里只取部分键、值显示
$("#msg").append("<li>" + data.d["0_key"] + "</li>");
$("#msg").append("<li>" + data.d["1_key"] + "</li>");
$("#msg").append("<li>" + data.d["2_key"] + "</li>");
$("#msg").append("<li>" + data.d["_key"] + "</li>");
$("#msg").css("color", "#0000FF");
},
error: function(err) {
$("#msg").css("color", "#FF0000").html("access faield:" + err);
}
});
return false;
});
});
</script>
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
C語言各種符號的使用方法
Apr 03, 2025 pm 04:48 PM
C 語言中符號的使用方法涵蓋算術、賦值、條件、邏輯、位運算符等。算術運算符用於基本數學運算，賦值運算符用於賦值和加減乘除賦值，條件運算符用於根據條件執行不同操作，邏輯運算符用於邏輯操作，位運算符用於位級操作，特殊常量用於表示空指針、文件結束標記和非數字值。
char在C語言中如何處理特殊字符
Apr 03, 2025 pm 03:18 PM
C語言中通過轉義序列處理特殊字符，如：\n表示換行符。 \t表示製表符。使用轉義序列或字符常量表示特殊字符，如char c = '\n'。注意，反斜杠需要轉義兩次。不同平台和編譯器可能有不同的轉義序列，請查閱文檔。
char在C語言字符串中的作用是什麼
Apr 03, 2025 pm 03:15 PM
在 C 語言中，char 類型在字符串中用於：1. 存儲單個字符；2. 使用數組表示字符串並以 null 終止符結束；3. 通過字符串操作函數進行操作；4. 從鍵盤讀取或輸出字符串。
c#多線程和異步的區別
Apr 03, 2025 pm 02:57 PM
多線程和異步的區別在於，多線程同時執行多個線程，而異步在不阻塞當前線程的情況下執行操作。多線程用於計算密集型任務，而異步用於用戶交互操作。多線程的優勢是提高計算性能，異步的優勢是不阻塞 UI 線程。選擇多線程還是異步取決於任務性質：計算密集型任務使用多線程，與外部資源交互且需要保持 UI 響應的任務使用異步。
char在C語言中如何進行類型轉換
Apr 03, 2025 pm 03:21 PM
在 C 語言中，char 類型轉換可以通過：強制類型轉換：使用強制類型轉換符將一種類型的數據直接轉換為另一種類型。自動類型轉換：當一種類型的數據可以容納另一種類型的值時，編譯器自動進行轉換。
char與wchar_t在C語言中的區別
Apr 03, 2025 pm 03:09 PM
在 C 語言中，char 和 wchar_t 的主要區別在於字符編碼：char 使用 ASCII 或擴展 ASCII，wchar_t 使用 Unicode；char 佔用 1-2 個字節，wchar_t 佔用 2-4 個字節；char 適用於英語文本，wchar_t 適用於多語言文本；char 廣泛支持，wchar_t 依賴於編譯器和操作系統是否支持 Unicode；char 的字符範圍受限，wchar_t 的字符範圍更大，並使用專門的函數進行算術運算。
char數組在C語言中如何使用
Apr 03, 2025 pm 03:24 PM
char 數組在 C 語言中存儲字符序列，聲明為 char array_name[size]。訪問元素通過下標運算符，元素以空終止符 '\0' 結尾，用於表示字符串終點。 C 語言提供多種字符串操作函數，如 strlen()、strcpy()、strcat() 和 strcmp()。
C語言 sum 的作用是什麼？
Apr 03, 2025 pm 02:21 PM
C語言中沒有內置求和函數，需自行編寫。可通過遍歷數組並累加元素實現求和：循環版本：使用for循環和數組長度計算求和。指針版本：使用指針指向數組元素，通過自增指針遍歷高效求和。動態分配數組版本：動態分配數組並自行管理內存，確保釋放已分配內存以防止內存洩漏。
