jquery ajax'post'电话

Question

I am new to jQuery and Ajax, and am having trouble with a 'post'.

I am using a jQuery Ajax 'post' call to save data to a DB. When I attempt to save the data, it passes null to my C# method. The jQuery looks like this:

function saveInfo(id) {
        var userID = id; 
        var userEmail = $('.userEmail').val();
        var userName  = $('.userName').val();

        var dataJSON = {"userID": userID, "userEmail": userEmail, "userName": userName};

            $.ajax({
                type: 'POST',
                url: '../../Services/AjaxServices.svc/SaveUser',
                data:JSON.stringify(dataJSON),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            });
        return false;
    }`

.userEmail and .userName are class references to input fields. The C# code looks like this:

[ServiceContract(Namespace = "http://testUsePage.com")]
[AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]                                                                        

public class AjaxServices
{
    [OperationContract]
    [WebInvoke(Method = "POST", BodyStyle=WebMessageBodyStyle.WrappedRequest, ResponseFormat           = WebMessageFormat.Json)]
    public void SaveUser(User user)
    {
        //code here handles save
    }
}

I have a breakpoint set inside the 'SaveUser' method, and the User object passed is always null. Thanks!

EDIT: I switched the 'POST' to 'GET' in both the ajax call and WebInvoke attribute. Passing one parameter ( {"UserID": UserID} ) to the method with the signature ( public void SaveUser(string UserID) ) reaches the breakpoint, and passes the UserID with no exception. Switching it back to a post immediately causes an internal server error.

Answer 1

You should send your user data in this way:

{ user : { userID : 1, ... } }

since you are using wrappedrequest. First element in your json should be your parametername.

The rest of your code seems ok. You should use stringify.

Answer 2

You dont need to use json for something so small. try this

function saveInfo(id) {
    var userID = id; 
    var userEmail = $('.userEmail').val();
    var userName  = $('.userName').val();
        $.ajax({type: 'POST',
            url: '../../Services/AjaxServices.svc/SaveUser/?userID='+userID+"&userEmail="+userEmail+"&userName="+userName,
        });
    return false;
}

Answer 3

You aren't setting RequestFormat property of the WebInvoke attribute to json.

Also in the $.ajax call send data: dataJSON without the JSON.stringify call.

If this fails try the following which will post form encoded information(the default) not json. client side

$.post('../../Services/AjaxServices.svc/SaveUser',
 {"userId": userID, "userEmail": userEmail, "userName": userName}
);

server side

[WebInvoke(Method = "POST", UriTemplate = "SaveUser?userId={userId}&userEmail={userEmail}&userName={userName}")]
public void SaveUser(string userId, string userEmail, string userName)

Answer 4

Have you tried opening the Net tab in Firefox's Firebug and profiling your call to see what is the actual data being posted to the web-service? Try that, if the data in there is empty then you know there's something in your Javascript that's wrong, then try to debug your Javascript.

But the problem is probably that your web-service method signature is expecting a User object as a parameter but you are passing in a bunch of literal parameters. You can change your method signature to something like this and it might work:

public void SaveUser(string userID, string userEmail, string userName)

I read your comments, try this:

No stringify on your JSON object in client-side script

public class AjaxServices
{
    [OperationContract]
    [WebInvoke(Method = "POST", BodyStyle=WebMessageBodyStyle.Bare, ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json)]
    public void SaveUser(string userID, string userEmail, string userName)
    {
        //code here handles save
    }
}

Answer 5

Simply: the data attribute of $.ajax() is a map (object) of data not a string of data. Don't stringify the object before sending it:

var dataJSON = {"userID": userID, "userEmail": userEmail, "userName": userName};

$.ajax({
    type: 'POST',
    url: '../../Services/AjaxServices.svc/SaveUser',
    data: dataJSON,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json'
});