-1

I have a form, I am using serialize() to get the values from the form and post it in ajax. But I am getting internal server error. Below I have attached the code

var formData = $('#loginForm').serialize();
var request = $.ajax({
    type: "POST",
    url: "/Ajax/Register",
    data: formData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
});

The formData produces username=aaa&password=bbb. I found that formData is the problem. If I use data : '{"username":"aaa","password":"bbb"}' it is working. Now I have to parse the data through hard coding it. is there any method that does this or resolves this issue?? and also If I change type:GET it works. but that's not the right way.

Sindhu
  • 100
  • 3
  • 14
  • Possible Duplicate: https://stackoverflow.com/questions/6255344/how-can-i-use-jquery-to-post-json-data – Kevin B Feb 07 '18 at 22:45
  • Possible Duplicate: https://stackoverflow.com/questions/4162749/convert-js-object-to-json-string – Kevin B Feb 07 '18 at 22:46
  • Possible duplicate of [Convert form data to JavaScript object with jQuery](https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery) – Jack Fairfield Feb 07 '18 at 22:50

3 Answers3

2

You could simply use serializeArray instead of .serialize();

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

var formData = objectifyForm($('#loginForm').serializeArray());

var request = $.ajax({
    type: "POST",
    url: "/Ajax/Register",
    data: JSON.stringify(formData),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
});

This is probably a duplicate of : Convert form data to JavaScript object with jQuery

Jack Fairfield
  • 1,876
  • 22
  • 25
-1

serialize() returns a URL-encoded string. If you really need JSON, you'll need to create the object by hand and call JSON.stringify().

var formData = JSON.stringify({
    username: $("#loginForm input[name=username]").val(),
    password: $("#loginForm input[name=password]").val()
});

For a more automated method, see Serialize form data to JSON

If the server script supports ordinary form data, you could use serialize() and remove the contentType: option.

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • I am have another registration form where I have 10 more fields. So I was trying to make it simple(if it is even possible) instead of using .val() for every fields.. – Sindhu Feb 07 '18 at 22:45
  • Unfortunately, jQuery doesn't have a shortcut for creating JSON from a form. Most servers expect URL-encoded parameters. – Barmar Feb 07 '18 at 22:50
  • It does however have a shortcut to create an array, and the browser has a, uh "shortcut" for converting an array to json... i mean.. – Kevin B Feb 07 '18 at 22:51
  • @KevinB But the server wants a JSON object, not a JSON array. I assume you're talking about `.serializeArray()`. – Barmar Feb 07 '18 at 22:52
-1

serialize() does not create an object with your form data, it creates a string. Maybe you want to use the post method instead:

var formData = $('#loginForm').serialize();
var request = $.post(
    "/Ajax/Register",
    formData
);
M_rivermount
  • 511
  • 3
  • 11