jQuery - AJAX

AJAX    [ Asynchronous JavaScript and XML ]

中文

        非同步的 JavaScript與 XML

作用

      僅向伺服器交換必要數據，而不是整張網頁

前端與後端

        前端

                jQuery

        後端

                ASP NET MVC

如何jQuery使用AJAX

                url : 後端的網址

                type : HTTP Request Method

                                EX : GET POST PUT 

                success : 後端成功回傳數據後，會呼叫該function

                                 EX : 將回傳的的數據渲染到網頁

                error : 後端錯誤時會呼叫該function

                                 EX : 如果找不到URL

                                         e1.status ==>404

                data : 傳送到後端的資料

後端的功能方法

           [HttpGet]

           public List<AccountsModel> GetAccounts()

           {

                    List<AccountsModel> result = JsonSerializer.Deserialize<List<AccountsModel>>(urlData);

                     return result;

           }

HTTP Request

        Get

                          $.ajax({

                                  url: '/accounts/GetAccounts',

                                  type: 'GET',

                                  success: function (res) {

                                          for (var index = 0; index < res.length; index++) {

                                                    var item = document.createElement("option")

                                                    item.value = res[index].code

                                                     item.text = res[index].name

                                                     $("#accounts-options").append(item)

                                          }

                                  },    

                                  error: function (e1) {

                                          console.log('======')

                                          console.log(e1.status)    //假設URL 錯誤 ==>404                                            

                                  }

                          })

        POST

var data = {     

        'accountName': $("#account-name").val(),

        'accountDescription': $("#account-description").val(),

        'currencyCode': $('#account-currrncyCode').val()

}

 $.ajax({ 

       url: '/Accounts/Create',

       type: 'POST',

       data: data,

       success: function (res) { 

           console.log(res) } 

   })