這是這一系列文章"與 AJAX 的 Web API"。在這一系列我們都解釋消耗 Web API rest 風格的服務使用 jQuery ajax() 和其他方法的各種方法。您可以閱讀我們以前的演示文稿,請訪問下面的文章:
這條 exlains 的"FormBody"和"FormUri"屬性以及如何使用它們的操作參數與消費上的客戶端的數據。所以,讓我們舉個例子。
使用 FromUri 屬性來發送數據
使用 FormUri 屬性,我們可以將數據傳遞通過的 URI URL。值應以鍵值對的形式。下面是一個示例,通過一個 URI 發送數據。在此示例中我們發送一個字符串通過 URL。參數的名稱是"名稱"。
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>
- <head runat="server">
- <script src="jquery-1.7.1.js" type="text/javascript"></script>
- <script>
- $(document).ready(function () {
- $("#Save").click(function () {
- $.ajax({
- url: 'http://localhost:3413/api/person?Name=Sourav',
- type: 'POST',
- dataType: 'json',
- success: function (data, textStatus, xhr) {
- console.log(data);
- },
- error: function (xhr, textStatus, errorThrown) {
- console.log('Error in Operation');
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <form name="form1" id="form1">
- <input type="button" id="Save" value="Save Data" />
- </form>
- </body>
- </html>
很明顯有在此方法中的某些限制。某些瀏覽器中的 URL 的長度是 256 個字符的限制和可能存在的安全漏洞。
配置 Web API 從 URI 獲取數據
現在我們需要配置 Web API 從 URI 中提取數據。我們已推行一項行動命名為"PostAction",將一個參數,並具有 FromUri 屬性指定該參數。這意味着名稱參數的值將通過 URI。這里是工作守則的執行。
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Net;
- using System.Net.Http;
- using System.Web.Http;
- namespace WebApplication1.WebAPI
- {
- public class personController : ApiController
- {
- [HttpPost]
- public String PostAction([FromUri] string Name)
- {
- return "Post Action";
- }
- }
- }
我們有一個停止的應用程序,以檢查是否所的數據來和它來。
注:我們可以在一個單一的 URI 傳遞多個參數。
獲取數據使用 FromBody 屬性
這是另一種方式,在 ajax() 調用獲取數據。在此示例中,我們將看到如何使用 FromBody 屬性的數據。看一看下面的示例。在這里是要發送數據的 ajax() 函數的實現。看一看 ajax() 函數的數據參數。我們看到使用鍵值對的值被傳遞的數據,但關鍵部分是空的。我們使用 FormBody 屬性的接收數據感興趣的時候我們應該保持為空的關鍵部分。
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="APICall.aspx.cs" Inherits="WebApplication1.APICall" %>
- <head runat="server">
- <script src="jquery-1.7.1.js" type="text/javascript"></script>
- <script>
- $(document).ready(function () {
- $("#Save").click(function () {
- $.ajax({
- url: 'http://localhost:3413/api/person',
- type: 'POST',
- dataType: 'json',
- data:{"":"Sourav Kayal"},
- success: function (data, textStatus, xhr) {
- console.log(data);
- },
- error: function (xhr, textStatus, errorThrown) {
- console.log('Error in Operation');
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <input type="button" id="Save" value="Save Data" />
- </body>
- </html>
現在我們需要配置 Web API 操作接收使用 FromBody 屬性的值。請參閱人控制器中的"PostAction"的操作。我們將看到用 FromBody 屬性指定 Name 參數。
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Net;
- using System.Net.Http;
- using System.Web.Http;
- namespace WebApplication1.WebAPI
- {
- public class person
- {
- public string name { get; set; }
- public string surname { get; set; }
- }
- public class personController : ApiController
- {
- [HttpPost]
- public String PostAction([FromBody] String Name)
- {
- return "Post Action";
- }
- }
- }

我們看到值從 ajax() 函數來在 POST 操作的時間。
是允許多個 FormBody 屬性嗎?
是,多個 formBodys 不允許在單個操作中。換句話說,我們不能在單個操作中指定多個 FromBody 參數。在這里是操作的不正確實現的示例:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Net;
- using System.Net.Http;
- using System.Web.Http;
- namespace WebApplication1.WebAPI
- {
- public class personController : ApiController
- {
- [HttpPost]
- public String PostAction([FromBody]string name, [FromBody] string surname)
- {
- return "";
- }
- }
- }
結論
這篇文章有 exlaind FromUri 和 FromBody 從 jQuery ajax() 函數接收一個值的概念。我希望你理解了,你將會在您下一次的 AJAX 調用中實現它。在以后的文章中,我們將探討幾個有趣的事實。