如何使用 JQuery Ajax Call 从 Web 方法接收 Json 格式的数据？答案

【问题标题】：How to receive data in Json format from web method using JQuery Ajax Call?如何使用 JQuery Ajax Call 从 Web 方法接收 Json 格式的数据？
【发布时间】：2015-03-13 06:38:14
【问题描述】：

我有一个文本框和旁边的按钮。我想通过 Jquery ajax 调用将作为 EmailId 的文本框的内容发送到 webmethod 并取回与该 EmailId 关联的数据 WebMethod 以 JSON 格式返回一组记录：

[HttpGet]
   [Route("api/Drive/GetDriveByEmail/{email}")]
   [WebMethod]
   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   public IEnumerable<object> GetDriveByEmail(string email)
   {
       using (var db1 = new RigilCares2Context())
       {
           var results = from d in db1.Drives
                         where d.email == email
                         select d;

           return results;
       }
   }

jquery调用的html文件如下：

<div>
    <h2>Enter Your Email Address </h2>
    <input type="text" id="useremail" size="5" />
    <input type="button" value="Search" onclick="findByEmail();" />
    <p id="drive" />
</div>
<h2>Here displays returned data from web api</h2>
<div id="divResult">

脚本如下：

function findByEmail() {

      var email = $('#useremail').val();
      $.ajax({
          type: "POST",
          dataType: "json",
          url: "/api/drive" + '/' + email,
          data: source,
          success: function (data) {
              getdrivelist();
          },
          error: function (x, y, z) {

              var strResult = "<table><th>Error Message</th>";

              strResult += "<tr><td> " + x.responseText + " </td></tr>"
              strResult += "</table>";
              $("#divResult").html(strResult);
              }

      });
  }

我不知道如何定义这个调用的数据属性。谁能帮我写一个完整的jquery函数来从那个webmethod接收一组json格式的记录。

另外，在 webapiconfig 文件中添加了一个路由：

config.Routes.MapHttpRoute(
          name: "actionApiByEmail",
          routeTemplate: "api/{controller}/{action}/{email}",
          defaults: new { action = "GetDriveByEmail", Id = RouteParameter.Optional }
           );

【问题讨论】：

另外，我认为方法应该是GET而不是POST

标签： jquery json asp.net-web-api

【解决方案1】：

鉴于您的网址已经包含您根本不需要任何数据的电子邮件，因为这会创建某事。比如/api/drive?email=foo@bar.net（用于GET），它不适合你的路线。但是url: "/api/drive" + '/' + email会将email设置为action，所以你需要做的是url: "/api/drive/GetDriveByEmail/" + email

【讨论】：

请求的 URL localhost:2830/api/drive/GetDriveByEmail/…
好的，我假设 localhost:2830/api/drive/GetDriveByEmail/s@gmail.com 是你想要的。为了确保我正确理解您，该 URL 的外观如何？
localhost:2830/api/drive/GetDriveByEmail 是 url 并且想用它传递一个可变的电子邮件，以便它可以使用电子邮件作为参数调用 GetDrive ByEmail 方法。
Iceburgs 解决方案是正确的。我会专注于路线，这对我来说看起来有点奇怪，但我不是 asp.net web api 的专家。在其他框架中，参数通常不是路由的一部分。
那么我应该怎么处理路由，我已经尝试了所有我能找到的东西

【解决方案2】：

希望这会有所帮助。

 function findByEmail() {
  var email = $('#useremail').val();
  $.ajax({
      type: "Get",
      dataType: "json",
      url: "/api/drive/GetDriveByEmail",
      contentType: 'application/json',
      data: JSON.stringify({email:email}),
      success: function (data) {
          getdrivelist();
      },
      error: function (x, y, z) {

          var strResult = "<table><th>Error Message</th>";

          strResult += "<tr><td> " + x.responseText + " </td></tr>"
          strResult += "</table>";
          $("#divResult").html(strResult);
          }

  });

}

【讨论】：

其给出错误“找到与请求匹配的多个操作：”

【解决方案3】：

我认为你的路由配置有一些错误，通常情况下，你不需要更改全局默认路由，只需将其保留为：

routes.MapHttpRoute(
    name: "API Default",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

在您的控制器中，您可以像这样覆盖路由：

public class DriveController : ApiController {

    [Route("~/api/drive/{email}")]
    public IEnumerable<object> GetDriveByEmail(string email) {
    }

}

然后你可以向：api/drive/someone@localhost 发起 GET 请求，jQuery ajax 请求应该是：

function findByEmail() {
    var email = $('#useremail').val();
    // use promise style ajax call is recommended
    $.ajax({
        url: 'api/drive/' + email,
        method: 'GET',
        dataType: 'json'
    })
    .done(function(data) {
        // call back when success
    })
    .fail(function(err) {
        // error call back;
    });
}

【讨论】：