[JQUERY]AJAX搭配JSON範例

以前用AJAX + .aspx的Page_Load雖然能夠達到目的,但是一個Function就要一個aspx網頁滿浪費的。

前陣子因為工作需要從aspx網頁使用JSON傳送資料到PHP網頁格式,對JSON有更多了解,

然後參考一下網路來做AJAX+JSON的範例。

首先,準備網頁,將Function宣告成WebMethod

 <System.Web.Services.WebMethod()> _
       Public Shared Function getData(ByVal id As String,ByVal name As String) As String


        Dim dtTemp As New DataTable
        dtTemp = GetData() '取得資料
        Return JsonStr(dtTemp) '回傳JSON格式


    End Function



        ''' <summary>
        ''' DataTable 轉 字串
        ''' </summary>
        ''' <param name="dtS"></param>
        ''' <returns></returns>
        ''' <remarks></remarks>
        Public Function JsonStr(ByVal dtS As DataTable) As String
            Dim strValue As String = ""
            strValue = JsonConvert.SerializeObject(dtS, Formatting.Indented)
            If strValue = "[]" Then
                strValue = ""
            End If
            Return strValue
        End Function

 

前端ajax呼叫

<script>


            //參數
            var params = {
                "id": "1234",
                "name": "王小明",
            };



$.ajax({
                type: "post",
                contentType: "application/json; charset=utf-8",
                url: "/路徑/程式名稱.aspx/getData",
                data: JSON.stringify(params), //將params轉成JSON格式
                dataType: "json",
                success: function(data) {
                    //將傳回的JSON資料轉成array
                    var dataArray = JSON.parse(data.d);

                    $.each(dataArray, function(i, item) {
                       var x = item["欄位名稱"];
                    
                },
                error: function(result) {
                    console.log(result);
                    
                }
            });
        });


</script>

 

剩下若有任何問題就打開開發者模式去查看console吧!