社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 後端開發 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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

<🎜>：種植花園 - 完整的突變指南
3 週前 By DDD
<🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
如何修復KB5055612無法在Windows 10中安裝？
3 週前 By DDD
北端：融合系統，解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1272
29
C# 教程
1252
24
顯示更多
Related knowledge
c＃.net的持續相關性：查看當前用法 c＃.net的持續相關性：查看當前用法 Apr 16, 2025 am 12:07 AM

C#.NET依然重要，因為它提供了強大的工具和庫，支持多種應用開發。 1)C#結合.NET框架，使開發高效便捷。 2)C#的類型安全和垃圾回收機制增強了其優勢。 3).NET提供跨平台運行環境和豐富的API，提升了開發靈活性。

從網絡到桌面：C＃.NET的多功能性 從網絡到桌面：C＃.NET的多功能性 Apr 15, 2025 am 12:07 AM

C#.NETisversatileforbothwebanddesktopdevelopment.1)Forweb,useASP.NETfordynamicapplications.2)Fordesktop,employWindowsFormsorWPFforrichinterfaces.3)UseXamarinforcross-platformdevelopment,enablingcodesharingacrossWindows,macOS,Linux,andmobiledevices.

C＃作為多功能.NET語言：應用程序和示例 C＃作為多功能.NET語言：應用程序和示例 Apr 26, 2025 am 12:26 AM

C#在企業級應用、遊戲開發、移動應用和Web開發中均有廣泛應用。 1)在企業級應用中，C#常用於ASP.NETCore開發WebAPI。 2)在遊戲開發中，C#與Unity引擎結合，實現角色控制等功能。 3)C#支持多態性和異步編程，提高代碼靈活性和應用性能。

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，

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）異步編程和最佳實踐提升了性能。

.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應用程序部署到Azure/AWS：逐步指南 將C＃.NET應用程序部署到Azure/AWS：逐步指南 Apr 23, 2025 am 12:06 AM

如何將C#.NET應用部署到Azure或AWS？答案是使用AzureAppService和AWSElasticBeanstalk。 1.在Azure上，使用AzureAppService和AzurePipelines自動化部署。 2.在AWS上，使用AmazonElasticBeanstalk和AWSLambda實現部署和無服務器計算。

C＃和.NET運行時：它們如何一起工作 C＃和.NET運行時：它們如何一起工作 Apr 19, 2025 am 12:04 AM

C#和.NET運行時緊密合作，賦予開發者高效、強大且跨平台的開發能力。 1）C#是一種類型安全且面向對象的編程語言，旨在與.NET框架無縫集成。 2）.NET運行時管理C#代碼的執行，提供垃圾回收、類型安全等服務，確保高效和跨平台運行。

See all articles