jquey ajax post method to post the json data to particular url and retrieve in particular webservice

Question

I have ajax request to post data to asmx webservice, how will i post multiple data values as json data to that url

 $.ajax(
        {
            type:"POST",
            url:"AjaxService.asmx/CheckUserNameAvailability",
            data:"{\"userName\":\"" + userName + "\"}",
            dataType:"json",
            contentType:"application/json",
            success: function(response) 
            {
                if(response.d == true) 
                {
                    $("#display").text("username is available and updated to database");
                     $("#display").css("background-color","lightgreen");
                }
                else
                {
                  $("#display").text("username is already taken");
                     $("#display").css("background-color","red");
                }
            }
        });

This is the particular webservice code where i retrieve the username ,how can i retrieve many values passed from that paticular url ,for example i have to retrieve username ,password, email,phoneno etc...

    public class AjaxService : System.Web.Services.WebService
    {
        [WebMethod]
        public bool CheckUserNameAvailability(string userName)
        {
            List<String> userNames = new List<string>() { "azamsharp", "johndoe", "marykate", "alexlowe", "scottgu" };

            var user = (from u in userNames
                        where u.ToLower().Equals(userName.ToLower())
                        select u).SingleOrDefault<String>();

            return String.IsNullOrEmpty(user) ? true : false; 

        }

    }
}

Answer 1

Try using the JSON.stringify method which will take care of properly encoding data instead of concatenating strings:

url: 'AjaxService.asmx/CheckUserNameAvailability',
data: JSON.stringify({ 
    userName: userName, 
    password: 'foo', 
    email: '[email protected]' 
}),
dataType: 'json'

Answer 2

If you are posting data to the webservice you just pass multiple parameters like this:

 data:"{'userName':'" + userName + "','password':'" + password + "','email':'" + email + "'  }",

You also need to change your webmethod:

public bool CheckUserNameAvailability(string userName, string password, string email)

Answer 3

Well, your service method can accept string array to get multiple user names as i/p.

public bool CheckUserNameAvailability(string[] userNames)

To pass values from java-script, use java-script array notation. For example,

   data: '{ userNames: ["Name1", "Name2", "Name3"] }'

For your second question, method can return an user object with all relevant properties for the requested user. For example, you can have a another method

public User GetUserDetails(string userName)

where User is class having relevant properties.

To invoke this service method, you have to update URL from your JS as follows:

url:"AjaxService.asmx/GetUserDetails"

Your service can have multiple web methods and you need to change URL accordingly. Now, the returned user object can be used in JS as any javascript object e.g. use response.d.Name to get user name, response.d.Email for email etc.

Answer 4

Try this: http://www.dotnetspeaks.com/DisplayArticle.aspx?ID=80