社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > 後端開發 > C#.Net教程 > jQuery.ajax()呼叫asp.net後台方法

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

高洛峰
發布： 2016-12-16 16:13:39
原創
1681 人瀏覽過

利用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中文網！

相關標籤：
asp.net ajax
來源：php.cn
上一篇：ASP.NET 使用Ajax 下一篇：Asp.net中JQuery、ajax呼叫後台方法總結
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在Laravel中以Bootstrap模式展示AWS PDF文件 我已經下載了awsurl，例如https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/655712202215174539...
來自於 2024-04-04 22:16:18
0
1
1450
修訂後的標題：根據複選框選擇計算總計 我正在開發一個簡單的財務追蹤應用程式。在應用程式中，有一個包含所有支出帳單的表格，然後是位於表格外部的總金額。我正在嘗試找到一種使用JS或AJAX的方法，以便當我選擇表行中的1個複...
來自於 2024-04-04 13:45:50
0
1
3465
使用 Ajax 產生內容 - 捲動到 Id 不起作用 我根據透過ajax取得的數據產生頁面內容。我遇到的問題是，當我想滾動到某個ID時，滾動要么不會發生，要么滾動到錯誤的位置。我一直在查看SO問答，但沒有找到任何好的解決方案。很多答案...
來自於 2024-04-04 09:29:39
0
1
397
傳遞多個列表從ajax到Django的方法 我有一個問題，我想從list獲取所有數據，所以我想循環所選項目中的每個數據並將其插入數據庫，目前，當我打印['[objectObject]','[objectObject]'],時...
來自於 2024-04-03 23:20:06
0
1
362
使用Ajax和PHP在CodeIgniter中上傳多個圖像文件 我在將多個圖像檔案上傳到伺服器端時遇到問題。如果有人能夠突出顯示程式碼的問題所在，那就太好了。最初有HTML程式碼：<labelclass="col-form-la...
來自於 2024-04-03 22:35:03
0
1
318
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板