HTML Form data convert to simple JSON object

Question

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);
                }
            });          
        });

try this http://stackoverflow.com/questions/11376184/jquery-serializearray-key-value-pairs — Dhiraj, Jun 05 '15 at 12:59
[this fiddle](http://jsfiddle.net/csaq7sjt/) seems to show the json you're looking for, not sure what your `serializeObject` does, mine was copied from this answer: http://stackoverflow.com/a/1186309/526704 — DLeh, Jun 05 '15 at 13:00

score 1 · Answer 1 · edited May 23 '17 at 12:15

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);
     }
});

HTML Form data convert to simple JSON object

1 Answers1