搜尋
首頁後端開發C#.Net教程jQuery.ajax()呼叫asp.net後台方法

jQuery.ajax()呼叫asp.net後台方法

高洛峰
高洛峰
Dec 16, 2016 pm 04:13 PM

利用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>
rr

 運行結果：

jQuery.ajax()呼叫asp.net後台方法

jQuery.ajax()呼叫asp.net後台方法透過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>

jQuery.ajax()呼叫asp.net後台方法

jQuery.ajax()呼叫asp.net後台方法


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: "{&#39;address&#39;:&#39;" + add + "&#39;,&#39;name&#39;:&#39;" + txtname + "&#39;}",
                    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>
jQuery.ajax()呼叫asp.net後台方法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程式碼：jQuery.ajax()呼叫asp.net後台方法

<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>

運作結果：


.

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: "{&#39;address&#39;:&#39;" + add + "&#39;,&#39;name&#39;:&#39;" + txtname + "&#39;}",
                    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>

html程式碼：

[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;
    }

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>

運作結果：

jQuery.ajax()呼叫asp.net後台方法

jQuery.ajax()呼叫asp.net後台方法

jQuery程式碼：

<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: "{&#39;address&#39;:&#39;" + add + "&#39;,&#39;name&#39;:&#39;" + txtname + "&#39;}",
                    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>

運行結果：

jQuery.ajax()呼叫asp.net後台方法

更多jQuery.ajax()調用asp.net後台方法相關文章請關注PHP中文網！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
C＃.NET與未來：適應新技術C＃.NET與未來：適應新技術Apr 14, 2025 am 12:06 AM

C#和.NET通過不斷的更新和優化，適應了新興技術的需求。 1）C#9.0和.NET5引入了記錄類型和性能優化。 2）.NETCore增強了雲原生和容器化支持。 3）ASP.NETCore與現代Web技術集成。 4）ML.NET支持機器學習和人工智能。 5）異步編程和最佳實踐提升了性能。

c＃.net適合您嗎？評估其適用性c＃.net適合您嗎？評估其適用性Apr 13, 2025 am 12:03 AM

c＃.netissutableforenterprise-levelapplications withemofrosoftecosystemdueToItsStrongTyping，richlibraries，androbustperraries，androbustperformance.however，itmaynotbeidealfoross-platement forment forment forment forvepentment offependment dovelopment toveloperment toveloperment whenrawspeedsportor whenrawspeedseedpolitical politionalitable，

.NET中的C＃代碼：探索編程過程.NET中的C＃代碼：探索編程過程Apr 12, 2025 am 12:02 AM

C#在.NET中的編程過程包括以下步驟：1)編寫C#代碼，2)編譯為中間語言（IL），3)由.NET運行時（CLR）執行。 C#在.NET中的優勢在於其現代化語法、強大的類型系統和與.NET框架的緊密集成，適用於從桌面應用到Web服務的各種開發場景。

C＃.NET：探索核心概念和編程基礎知識C＃.NET：探索核心概念和編程基礎知識Apr 10, 2025 am 09:32 AM

C#是一種現代、面向對象的編程語言，由微軟開發並作為.NET框架的一部分。 1.C#支持面向對象編程（OOP），包括封裝、繼承和多態。 2.C#中的異步編程通過async和await關鍵字實現，提高應用的響應性。 3.使用LINQ可以簡潔地處理數據集合。 4.常見錯誤包括空引用異常和索引超出範圍異常，調試技巧包括使用調試器和異常處理。 5.性能優化包括使用StringBuilder和避免不必要的裝箱和拆箱。

測試C＃.NET應用程序：單元，集成和端到端測試測試C＃.NET應用程序：單元，集成和端到端測試Apr 09, 2025 am 12:04 AM

C#.NET應用的測試策略包括單元測試、集成測試和端到端測試。 1.單元測試確保代碼的最小單元獨立工作，使用MSTest、NUnit或xUnit框架。 2.集成測試驗證多個單元組合的功能，常用模擬數據和外部服務。 3.端到端測試模擬用戶完整操作流程，通常使用Selenium進行自動化測試。

高級C＃.NET教程：ACE您的下一次高級開發人員面試高級C＃.NET教程：ACE您的下一次高級開發人員面試Apr 08, 2025 am 12:06 AM

C#高級開發者面試需要掌握異步編程、LINQ、.NET框架內部工作原理等核心知識。 1.異步編程通過async和await簡化操作，提升應用響應性。 2.LINQ以SQL風格操作數據，需注意性能。 3..NET框架的CLR管理內存，垃圾回收需謹慎使用。

C＃.NET面試問題和答案：提高您的專業知識C＃.NET面試問題和答案：提高您的專業知識Apr 07, 2025 am 12:01 AM

C#.NET面試問題和答案包括基礎知識、核心概念和高級用法。 1)基礎知識：C#是微軟開發的面向對象語言，主要用於.NET框架。 2)核心概念：委託和事件允許動態綁定方法，LINQ提供強大查詢功能。 3)高級用法：異步編程提高響應性，表達式樹用於動態代碼構建。

使用C＃.NET建築微服務：建築師實用指南使用C＃.NET建築微服務：建築師實用指南Apr 06, 2025 am 12:08 AM

C#.NET是構建微服務的熱門選擇，因為其生態系統強大且支持豐富。 1)使用ASP.NETCore創建RESTfulAPI，處理訂單創建和查詢。 2)利用gRPC實現微服務間的高效通信，定義和實現訂單服務。 3)通過Docker容器化微服務，簡化部署和管理。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

mPDF

mPDF

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7491
15
CakePHP 教程
1377
52
steam的賬戶名稱是什麼格式
77
11
win11激活密鑰永久
52
19
NYT連接提示和答案
19
41
顯示更多