Post
Ask Question

Send / Receive Object From jQuery And Web Services

Introduction

In this article you will learn how to send / receive object from jQuery and web services.

This article will cover two situations at same time i.e. how to send/receive object from jQuery and how to send / receive object from web services.

I'll explain it by creating a simple sample application.

Step 1

Firstly, I had created a simple HTML page whose data will be send to the web service.

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="jquery-1.7.1.js"></script>  
  6.     <script src="JavaScript1.js"></script>  
  7. </head>  
  8. <body>  
  9.     <fieldset>  
  10.         <legend>Provide Details</legend>  
  11.         Your Name:  
  12.         <input type="text" id="txtName" />  
  13.         <br />  
  14.         Mobile No:  
  15.         <input type="text" id="txtMobile" />  
  16.         <br />  
  17.         Mother Name:  
  18.         <input type="text" id="txtMother" />  
  19.         <br />  
  20.         <br />  
  21.     </fieldset>  
  22.     <div>  
  23.         <input type="button" id="btnSubmit" value="Submit" />  
  24.     </div>  
  25.   
  26. </body>  
  27. </html>  

Step 2

After this I worked on the jQuery part, for this I had created a new JavaScript file in which the following code will be written.

  1. $(document).ready(function () {  
  2.     $('#btnSubmit').click(function () {  
  3.         dataArr = [];  
  4.         dataArr.push(new Object());  
  5.         var Name = $('#txtName').val();  
  6.         var MobileNumber = $('#txtMobile').val();  
  7.         var MotherName = $('#txtMother').val();  
  8.         dataArr[0]["Name"] = Name;  
  9.         dataArr[0]["MobileNumber"] = MobileNumber;  
  10.         dataArr[0]["MotherName"] = MotherName;  
  11.         jQuery.ajax({  
  12.             type: 'POST',  
  13.             contentType: "application/json; charset=utf-8",  
  14.             url: 'WebService1.asmx/Save_Session',  
  15.             data: "{'aray':" + JSON.stringify(dataArr) + "}",  
  16.             dataType: 'JSON',  
  17.             success: function (response) {  
  18.             },  
  19.             error: function (err) {  
  20.             }  
  21.         });  
  22.     });  
  23. });  

On this JavaScript file first of all I had created a button click event, in this click event I had created an array in which new empty object is being inserted.

After creating the object you can see that I had inserted values of textboxes in a Key:Value manner. I had taken static object but you can make dynamic entries as well.

After creating the object you can see that I had made an ajax call to web service, and object data is send to that service after making it JSON string.

Step 3

After this I had created a web service where ajax call will be made.

  1. [WebMethod]  
  2. public object Save_Session(List<Object> aray)  
  3. {  
  4.     string text = "";  
  5.     try  
  6.     {  
  7.         foreach (Dictionary<string, object> item in aray)  
  8.         {  
  9.             text = new JavaScriptSerializer().Serialize(item);  
  10.         };  
  11.         return text;  
  12.     }  
  13.     catch (Exception ex)  
  14.     {  
  15.         return text;  
  16.     }  
  17. }  

Here, I created a WebMethod in which list of object is used as parameter, in this list data will come from Ajax call as parameter.

In this method I had break the coming list of object using foreach and dictionary, so item will hold the data for each object. Now you can use this item according to your need.

Till now we got the data in object format in service but now we will see how to send object from here.

For sending the data you can see that I had serialized the same data which was coming and returned it as an object.

Step 4

Let's get back to the Ajax call and add some code in success function so that object data can be gathered and used.

  1. jQuery.ajax({  
  2.     type: 'POST',  
  3.     contentType: "application/json; charset=utf-8",  
  4.     url: 'WebService1.asmx/Save_Session',  
  5.     data: "{'aray':" + JSON.stringify(dataArr) + "}",  
  6.     dataType: 'JSON',  
  7.     success: function (response) {  
  8.         var getData = JSON.parse(response.d);  
  9.     },  
  10.     error: function (err) {  
  11.         alert(err);  
  12.     }  
  13. });  

Here I had parsed the data and transferred it to a variable, from here it's data can be used.

Let's see the output

Output

On running the application this window will be shown:


Now I filled some data and clicked on the submit button, I put a debugger at WebMethod and checked what data is coming over there.


As I already told you that I am returning the same data from here as well so let's see what will be send from here.


Now check the data at console of browser.



Similar Articles