How to send values as form object via AJAX?

Question

We're experiencing problems with special characters from a pw field send as string via AJAX.

Current situation is this:

function resetPW() {
    var username = encodeURIComponent($("#email").val());
    var password = encodeURIComponent($("#newpassword").val());

    $.ajax({
        url: "/setnewpassword",
        type: "post",
        data: "username=" + username + "&password=" + password,
    }).done(function (response) { 
        ... 
    });

Some special characters (&) have been replaced by blanks before (this seems to be fixed with the encoding, which wasn't there before), others seem to be wrong encoded. At the end, a lot of users are having problems with their login.

I really don't know what to do here. Someone mentioned I should send data via "form objects" - but how do I achieve this here? I can find some questions to this topic already online, but as I am absolute inexperienced in object building and AJAX at all, I cannot adopt those replies to my special problem. So please excuse if this question is a duplicate for you!

Tomalak · Accepted Answer · 2021-10-25 08:09:09Z

1

Don't encode the data yourself. jQuery does that for you. Let it.

function resetPW() {
    return $.post("/setnewpassword", {
        username: $("#email").val(),
        password: $("#newpassword").val()
    }).done(function (response) { 
        ... 
    });
}

If that doesn't work, then your server code is broken.

Some special characters (&) have been replaced by blanks before

No, don't do that either. Leave everything exactly as the user has entered it.

answered Oct 25, 2021 at 8:09

Tomalak

340k68 gold badges547 silver badges635 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JonSnow Over a year ago

Looks promising and I will give it a try. BTW, Is there a chance to reach the other parts of a "traditional" AJAX call, eg the "beforeSend" block with this ?

Tomalak Over a year ago

@JonSnow $.post() is a shorthand. I used it because it has a lower profile for simple requests. If you need any of the advanced features, by all means go back to $.ajax({type: 'post'}).

JonSnow Over a year ago

So it will be $.ajax({type: 'post', username: $("#email").val(), password: $("#newpassword").val() }).done(function(response) { ... }); then?

JonSnow Over a year ago

Or shorter.... the only difference will be the data line then? data: { username : $("#email").val(), password: $("#newpassword").val() }, => or how will it be well-formed?

Collectives™ on Stack Overflow

How to send values as form object via AJAX?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related