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

Question

I have a text box and a button next to it. I want to send the content of textbox that is a EmailId through Jquery ajax call to webmethod and get back the data associated with that EmailId The WebMethod returns a group of records in JSON format as:

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

The html file with jquery call is as:

<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">

The script is as:

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

      });
  }

I dont know how to define the data property of this call.Can someone please help me to write the complete jquery function to receive a group of records in json format from that webmethod.

Also,added a route in webapiconfig file as:

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

Answer 1

Hope this will help.

 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

Given that your url already includes the email you don't need any data at all, as this would create sth. like /api/drive?email=foo@bar.net (for GET), which does not fit your route. However, url: "/api/drive" + '/' + email will set email as action, so what you need to do is url: "/api/drive/GetDriveByEmail/" + email

Answer 3

I think there are some errors in your route config, usually, you do not need change the global default route, just leave it as:

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

In your controller, you can override the route like this:

public class DriveController : ApiController {

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

}

Then you can do GET request to: api/drive/someone@localhost , the jQuery ajax request should like:

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