jQuery calls Webservice to pass the method of json array

  • 2021-07-09 07:08:03
  • OfStack

This article illustrates how jQuery calls Webservice to pass json arrays. Share it for your reference, as follows:

Jquery provides a powerful method of $. ajax, which makes it easy to call webservice to realize asynchronous. Json string can be passed to Webservice on the page. After Webservice method carries out business processing, Json object is returned to the page, so that the page can be displayed.

All these are very simple, but this is not what we want to learn today. In the actual business process, we will find that it is not one or more strings that the page needs to pass to webservice, but sometimes it needs to pass one combined data, such as such a group of data:

{'Employee': [{'name':'John','sex':'man','age':'25'},{'name':'Tom','sex':'man','age':'21'}]}

It is no problem for the client to use this Json string as the data parameter of the $. ajax method, however, how the webservice of the server should write the receive parameter has become a problem. After Baidu and Google checked once, they only found those who asked questions but did not answer them. Just go to study it yourself, and find that the Employee object is an array at first, and every item in the number group is an Dictionary < string,string > Dictionary type. So I tried to use Dictionary on the server side < string,string > [] Employee to receive the parameters passed by the client, 1 cut as I expected, successful!

The client code is as follows:


//JQuery  Call webService Import data 
function LoadData() {
    var studentData = CollectionData();
    $.ajax({
      url: "ImportDataService.asmx/ImportStu",
      type: "post",
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      data: "{'students':[{'name':'KoBe ','sex':'boy','age':'20'},{'name':'Mary','sex':'girl','age':'19'}]}",
      success: function(result) {
        alert(result.d);
      },
      error: function(e) {
        alert(e.responseText);
      }
    });
}

The server-side code is as follows:


/// <summary>
///
/// </summary>
/// <param name="students"></param>
/// <returns></returns>
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public string ImportStu(Dictionary<string,string> []students)
{
  if (students.Length == 0)
  {
    return " There is no data !";
  }
  else
  {
    try
    {
      foreach (Dictionary<string, string> stu in students)
      {
        // Structure 1 A new one Student Object. 
        Student student = new Student();
        // Is a newly constructed Student Object property assignment. 
        foreach (string key in stu.Keys)
        {
          switch (key)
          {
            case "name":
              student.Name = stu[key];
              break;
            case "sex":
              student.Sex = stu[key];
              break;
            case "age":
              int age;
              if (Int32.TryParse(stu[key], out age))
              {
                student.Age = age;
              }
              else
              {
                student.Age = 0;
              }
              break;
            default:
              break;
          }
        }
      }
      return " Success in introducing students !";
    }
    catch
    {
      throw new Exception(" Failure to import students !");
    }
  }
}

Note that the server parameter name needs to be the same as the key value of the client Json array, as in the above code, the parameter name is students.

More readers interested in jQuery can check the topics of this site: "Summary of jQuery Extension Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Table (table) Operation Skills", "Summary of Ajax Usage in jquery", "Summary of jQuery Common Classic Special Effects", "Summary of jQuery Animation and Special Effects Usage" and "Summary of jquery Selector Usage"

I hope this article is helpful to everyone's jQuery programming.


Related articles: