Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

This question already has an answer here:

I"m trying to convert my HTML form data to JSON object for submitting via Ajax. It seems to "work", but i'm not getting the JSON format I want. It probably has to do with the 

JSON.stringify($("#frm_login").serializeObject())

The JSON output i am getting is this:

[{"name":"username","value":"mike"},{"name":"password","value":"test123"}]

But the JSON output I REALLY want to get is something simpler, similar to this:

{
"username":"mike",
"password":"test123"
}

Below is my simple html and ajax code:

<form id="frm_login" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
                    <label for="username">Username:</label>
                    <input type="text" name="username" id="username" value=""  />
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" value=""  />
                    <input type="button" data-theme="b" name="btn_login" id="btn_login" value="Login">

                </form>

And my ajax code:

$(document).on('click', '#btn_login', function(){ 
            var url = 'http://localhost/proto01/api/users/token';       
            $.ajax({
                url: url, dataType: "json", async: true,
                type: "POST",
                headers: { Accept : "application/json; charset=utf-8", "Content-Type": "application/json; charset=utf-8" },

                data: JSON.stringify($("#frm_login").serializeObject()),
                success: function (result) {
                    alert("Success");
                },
                error: function (request,error) {
                    alert('Network error has occurred please try again!' + error);
                }
            });          
        });
share|improve this question

marked as duplicate by Dhiraj, DLeh, Community♦ Jun 5 '15 at 13:13

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1  
try this stackoverflow.com/questions/11376184/… – Dhiraj Jun 5 '15 at 12:59
1  
this fiddle seems to show the json you're looking for, not sure what your serializeObject does, mine was copied from this answer: stackoverflow.com/a/1186309/526704 – DLeh Jun 5 '15 at 13:00
up vote 1 down vote

If you're serializing it you should just do data: $("#frm_login").serialize()

From this StackOverflow post (See 2nd, 3rd, and 4th post)

JQuery Serialize - keep in mind though that with serializing it you have to access the data in your controller using Request.Form (.NET)

Otherwise, you can create it yourself

var model = {
    'username': $.trim($('[name="username"]').val()),
    ...
    ...
};

$.ajax({
     url: url, dataType: "json", async: true,
     type: "POST",
     headers: { Accept : "application/json; charset=utf-8", "Content-Type": "application/json; charset=utf-8" },
     data: JSON.stringify(model),
     processData: false,
     success: function (result) {
            alert("Success");
     },
     error: function (request,error) {
          alert('Network error has occurred please try again!' + error);
     }
});
share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.