jquery serialize error

Question

I have login form which i want to send via ajax using serialize but its send data in wrong format like this

Array
(
    [form] => uname=as
    [upass] => amitpatilasas
    [action] => login
)

This HTML

    <form action="#" method="post" name="login" id="login" rel="external" class="ui-corner-all">

            <div data-role="fieldcontain">
             <input type="text" name="uname" id="uname" value="" placeholder="Username" />
            </div>

            <div data-role="fieldcontain">
             <input type="password" name="upass" id="upass" value="" placeholder="Password" />
            </div>

            <div class="ui-body ui-body-b">
            <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button type="button" id="cancel" data-theme="d">Cancel</button></div>
                    <div class="ui-block-b"><button type="button" id="dologin" data-theme="a">Login</button></div>
            </fieldset>
            </div>

    </form>

This is javascrip

    $.ajax({
      type: "POST",
      url: "server.php",
      data: "form="+$("#login").serialize()+"&action=login",
      success: function(responce){

score 2 · Accepted Answer · answered Dec 19 '11 at 08:19

2

Drop the "form="+ part. Then it'll work.

$.ajax({
      type: "POST",
      url: "server.php",
      data: $("#login").serialize()+"&action=login",
      success: function(responce){

At least it will give you this output;

Array
(
    [uname] => as
    [upass] => amitpatilasas
    [action] => login
)

answered Dec 19 '11 at 08:19

Emre Erkan

8,433
3
48
53

Hey Emre, thanks man...it worked...and i cant believe how i can be this much DUMB...y i didnt analyzed it properly :P – www.amitpatil.me Dec 19 '11 at 08:59
Sorry dont get me wrong...i read ur answer first accepted it,commented and then i saw next post...i commented that, accepted too...i didnt knew that it will remove first "acceptance" i am new to stackoverflow. – www.amitpatil.me Dec 19 '11 at 10:21
1

No problem. If other answer is more satisfying for you, you can accept that instead of mine. It's your choice. I was just curious about your reason. – Emre Erkan Dec 19 '11 at 15:18

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

Your code:

"form="+$("#login").serialize()+"&action=login"

Given someuser and somepassword, will send this data:

form=uname=someuser&upass=somepassword&action=login

Notice the double equals sign, which is wrong, and which is why you're getting the error. If you drop the form= part, then you'll get a correct query string.

However it is weird to send in query string parameters in the body of the message rather than the URL. It'd make more sense to structure your code this way:

var loginUrl = "server.php"
    + "?"
    + $("#login").serialize()
    + "&action=login"
    ;

$.ajax({
  type: "POST",
  url: loginUrl,
  success: function(response){
    // ...
  },
  error: function(response){
    // ...
  }
);

... or send in the body as JSON rather than as query string parameters.

To find out how to serialize to JSON, see this question.

edited May 23 '17 at 11:55

Community

1
1

answered Dec 19 '11 at 08:32

Merlyn Morgan-Graham

58,163
16
128
183

1

Merlyn, if you send JSON, jQuery automatically serializes it and convert it to querystring formation. Best practice for this situation is using `data` property. Amit is doing right. – Emre Erkan Dec 19 '11 at 09:04
@EmreErkan: "if you send JSON, jQuery automatically serializes it and convert it to querystring formation" - it doesn't put it in the URL tho (at least [not via my experimentation](http://jsfiddle.net/cqadk/)). If it automatically tears apart JSON (even manually formatted) and turns it into a query string *in the body of the message*, that would be strange. I'm talking about AJAX best practices, not jQuery. Making your AJAX API expect a query string in the body of the message is weird. – Merlyn Morgan-Graham Dec 19 '11 at 09:11
@EmreErkan: My googling for "jQuery JSON query string" seems to bring up if you assign an *array* to `data`, that [jQuery will turn that into a query string](http://stackoverflow.com/questions/3308846/serialize-json-to-query-string-in-javascript-jquery). That's not what the OP is doing here. – Merlyn Morgan-Graham Dec 19 '11 at 09:16
1

From [documentation](http://api.jquery.com/jQuery.ajax/):data Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below). – Emre Erkan Dec 19 '11 at 09:16
@EmreErkan: I'm not arguing that jQuery doesn't automatically do this. My experiments agree with your statements there. My whole point is that having a serialized query string in the body is weird, no matter whether jQuery seems to prefer it or not. If your additional processing options can get jQuery to append it to the URL on POST requests too, that sounds like a good idea here, and a better idea than manually building the URL like my code is doing. – Merlyn Morgan-Graham Dec 19 '11 at 09:22

jquery serialize error

2 Answers2