Question

我有一个文本框和旁边的按钮。我想通过Jquery ajax调用webmethod发送作为EmailId的文本框的内容，并获取与该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 }
           );

Answer 1

希望这会有所帮助。

 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);
          }

  });

}

Answer 2

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

Answer 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) {
    }

}

然后您可以执行GET请求：api/drive/someone@localhost，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;
    });
}

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

3 个答案: