WebAPI學習日記一:Ajax請求傳遞參數遇到的問題

来源:http://www.cnblogs.com/yzcStudy/archive/2016/08/13/5767109.html
-Advertisement-
Play Games

首先,本人大學剛畢業,想把自己學習的一些東西記錄下來,也是和大家分享,如有不對之處還請多加指正。聲明:但凡是我博客里的文章均是本人實際操作遇到的例子,不會隨便從網上拷貝或者轉載,本著對自己和觀眾負責的態度。 什麼是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的 ...


首先,本人大學剛畢業,想把自己學習的一些東西記錄下來,也是和大家分享,如有不對之處還請多加指正。
聲明:但凡是我博客里的文章均是本人實際操作遇到的例子,不會隨便從網上拷貝或者轉載,本著對自己和觀眾負責的態度。

什麼是WebAPI?我的理解是WebAPI+JQuery(前端)基本上能完成Web MVC的功能,即:這麼理解吧,WebAPI相當於Web MVC的後臺部分。

接下來直接上例子吧,都是我在學習過程中遇到或者發現的一些問題。

 一、創建WebAPI項目

     (這個環節不是本章重點)

二、傳遞參數遇到的問題

     後臺實體類(Person):

 1 namespace WebApi.Models
 2 {
 3     public class Person
 4     {
 5 
 6         public int ID { get; set; }
 7         public string Name { get; set; }
 8         public string EnglishName { get; set; }
 9     }
10 }

  後臺介面:

 1     public class TestController : ApiController
 2     {
 3         public Person GetEnglishName(int ID, string Name)
 4         {
 5             Person man = new Person();
 6             man.ID = ID;
 7             man.Name = Name;
 8             man.EnglishName = "Bert";
 9             return man;
10         }
11     }

  前端Ajax請求:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <input  type="submit" id="testId"/>
10     <input  type="text" id="text1"/>
11 </body>
12 </html>
13 <script src="Scripts/jquery-1.10.2.min.js"></script>
14 <script type="text/javascript">
15     $("#testId").click(function () {
16         $.ajax({
17             url: "/api/Test/GetEnglishName",
18             type: "GET",
19             data: { "ID": 1, "Name": "yzc" },
20             success: function (data) {
21                 $("#text1").val(data.EnglishName);
22             }
23         });
24     });
25 </script>

  結果:

  如上,這是最普通的一次訪問WebApi的的Ajax請求,接下來我們來講幾個比較特殊的例子,希望能加強對WebAPI傳參的理解和使用。

    ①代碼修改如下:

 1     public class TestController : ApiController
 2     {
 3         public Person SetEnglishName(int ID, string Name)
 4         {
 5             Person man = new Person();
 6             man.ID = ID;
 7             man.Name = Name;
 8             man.EnglishName = "Bert";
 9             return man;
10         }
11     }
 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <meta charset="utf-8" />
 6 </head>
 7 <body>
 8     <input  type="submit" id="testId"/>
 9     <input  type="text" id="text1"/>
10 </body>
11 </html>
12 <script src="Scripts/jquery-1.10.2.min.js"></script>
13 <script type="text/javascript">
14     $("#testId").click(function () {
15         $.ajax({
16             url: "/api/Test/SetEnglishName",
17             type: "GET",
18             data: { "ID": 1, "Name": "yzc" },
19             success: function (data) {
20                 $("#text1").val(data.EnglishName);
21             }
22         });
23     });
24 </script>

結果:

 結論:這裡我們僅僅只是更改了介面的名稱而已,從GetEnglishName改為SetEnglishName,為什麼就找不到該方法了呢?原因是:WebAPI對於後臺方法介面在沒有給它添加訪問方式的前提下(如:[HttpPost]),並且方法名稱開頭帶著Get的話,預設是Get請求。所有在上面例子中,方法名既沒有標明請求方式,也不是Get開頭,它自然找不到可以允許訪問的方法了,建議:不管是什麼類型的請求都在方法上設置訪問類型。

 ②post請求傳遞一個參數的時候,data並不是傳的鍵/值對形式,而是data:{"":"yzc"},記住這種特殊情況,不然後臺是獲取不到前端傳過去的值得,至於原因是:Web API 要求請求傳遞的 [FromBody] 參數,是有一個特定的格式,才能被正確的獲取到。

 ③post傳遞多個參數的時候 (被標記[FromBody]的參數只能出現一次,被標記為[FromUri]的參數可以出現多次,如果被標記為[FromUri]的參數是簡單參數,該標記可以去掉。)

請求的時候1、data:JSON.stringify(x)和contentType: "application/json"一起使用,或者2、data:{為鍵值對},並且不能加contentType: "application/json",這兩種情況後臺[FromBody]參數都能獲取到值。(經測試過,當出現交叉情況,如:data裡面為鍵值對,且加了contentType: "application/json",後臺將不能訪問數據)

 ④當post請求的參數多的時候,就需要封裝在一個類裡面,這樣後臺也需要創建臨時類來接收,而dynamic可以讓我們省掉許多類。然而前端Ajax請求參數的配置目前自己試過的只有data:JSON.stringify(x)和contentType:"application/json"一起後臺才能拿到數據。

 前端請求:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <meta charset="utf-8" />
 7 </head>
 8 <body>
 9     <input  type="submit" id="testId"/>
10     <input  type="text" id="text1"/>
11 </body>
12 </html>
13 <script src="Scripts/jquery-1.10.2.min.js"></script>
14 <script type="text/javascript">
15     $("#testId").click(function () {
16         $.ajax({
17             url: "/api/Test/GetEnglishName",
18             type: "POST",
19             contentType: "application/json",
20             data:JSON.stringify({ "ID": 1, "Name": "yzc"}), 
21             success: function (data) {
22                 $("#text1").val(data.EnglishName);
23             }
24         });
25     });
26 </script>

 後臺介面:

 1     public class TestController : ApiController
 2     {
 3         [HttpPost]
 4         public Person GetEnglishName(dynamic per)
 5         {
 6             Person man = new Person();
 7             man.ID = per.ID;
 8             man.Name = per.Name;
 9             man.EnglishName = "Bert";
10             return man;
11         }
12     }

 結果:

三、總結:

  本文關於Web API參數請求的情況並沒有全部寫出來,而是根據本人在學習過程中遇到的一些問題特意記錄下來,講的不明白的地方歡迎討論交流。我覺得學習軟體開發就得知其然,知其所以然,但由於也是剛接觸這個Web API,文中蠻多地方,都是自己去測試,去找資料,所以有些地方還不能很好的解釋,但我相信這並不結束,而是開始。

 

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 附帶東野圭吾小說集(txt文件)http://pan.baidu.com/s/1slMSFxj 類模塊有多種用途,主要用於以下幾個方面: 1.封裝相似功能到單個對象中 2.建立帶有屬性、方法和事件的對象 3.特為自定義集合建立類模塊 封裝相似功能: 以一個名為clsUStationDialog的類開 ...
  • 前一篇分析了前十個基礎實驗的代碼,從這裡開始分析後十個~ 一、PPI原理: PPI(Programmable Peripheral Interconnect),中文翻譯為可編程外設互連。 在nRF51822 內部設置了PPI 方式,可以通過任務和事件讓不同外設之間進行互連,而不需要CPU 進行參與。 ...
  • nginx代理啟動 /usr/local/nginx/sbin/nginx apache2.2 service httpd restart【重啟apache服務】vi /etc/sysconfig/iptables【防火牆配置】service iptables restart【重啟防火牆服務】 vi ...
  • 實驗01 - GPIO輸出控制LED 引腳輸出配置:nrf_gpio_cfg_output(LED_1); 引腳輸出置高:nrf_gpio_pin_set(LED_1); 引腳電平轉換:nrf_gpio_pin_toggle(LED_1); 毫秒延時:nrf_delay_ms(100); 實驗02 ...
  • ---------------------現在windows下的命令提示符只是一個軟體,操作方式和界面模擬dos操作系統 ...
  • 實習筆記1 2016年8月1日 14:12 Option Explicit 預設情況下,如果使用一個沒有聲明的變數,它將繼承“Variant”類型。在模塊、窗體和類的通用聲明區使用“OptionExplicit”能強制我們必須聲明變數後才能使用變數 Sample: 在通用聲明區聲明瞭“Option ...
  • 功能: 單擊選中行,雙擊打開詳細頁面 說明:單擊事件(onclick)使用了 setTimeout 延遲,根據實際需要修改延遲時間 ;當雙擊時,通過全局變數 dbl_click 來取消單擊事件的響應 常見處理行方式會選擇在 RowDataBound/ItemDataBound 中處理,這裡我選擇 P ...
  • 1.EF是什麼? EF是.net封裝的一個用於資料庫交互的實體層框架,它的全稱是Entity Framework。 2.EF搭建: 新建之後,我們就可以看到裡面的內容: 我們可以分別看一下它裡面有些什麼? 2.1.創建ef之後,我們EF裡面[打開方式-XML文本編輯器]看到它裡面最主要的有SSDL, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...