Email address string loses the '+"' when using AJAX

Question

Email address string loses the '+"' when using AJAX

My ajax code has been working well in most cases, but when I tried using it for updating user details on my page, I noticed that the ""+"" symbol was getting lost if used in an email address (such as

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d9c8a8dd28d9c8a8db98d9c8a8dd79a9694">[email protected]</a>

showing up as

test <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394d5c4a4d794d5c4a4d175a5654">[email protected]</a>

in my PHP file.

function prefUpdate() {
    let ytTog = document.getElementById("togBtn").checked;
    let unameNew = document.getElementById("uname").value;
    let usnameNew = document.getElementById("usname").value;
    let emailNew = document.getElementById("email").value;
    let params = "ytTog="+ytTog+"&unameNew="+unameNew+"&usnameNew="+usnameNew+"&emailNew="+emailNew;
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'pref_update.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            let return_data = xhr.responseText;
            if(return_data) {
               <do stuff>
            }
        }
    }
    xhr.send(params);
}

Essentially, I am fetching a button, first and last name, along with the email address, passing them to a php file which returns some data for further processing.

I suspect that the issue might be with the

'application/x-www-form-urlencoded'

, but my searches haven't provided me with a solution yet.

[edit] I did try replacing

application/x-www-form-urlencoded

with multipart/form-data, but that ended up breaking things completely.

javascript ajax

Answer 1

Answer №1

To ensure secure data transmission during an ajax call, it is essential to encode your data correctly. Utilizing a URLSearchParams object can simplify this process for you.

let params = new URLSearchParams({username, password, email});
...
xhr.send(params);

Answer 2

To ensure secure data transmission during an ajax call, it is essential to encode your data correctly. Utilizing a URLSearchParams object can simplify this process for you.

let params = new URLSearchParams({username, password, email});
...
xhr.send(params);

Answer 3

Answer №2

Correct, when using Content-Type: application/x-www-form-urlencoded, any '+' symbols represent spaces. To properly encode these, utilize the function encodeURIComponent().

let params = Object.entries({ username, password, email })
  .map(pair => pair.map(encodeURIComponent).join('='))
  .join('&');

Referencing the MDN documentation:

For application/x-www-form-urlencoded, it is necessary to replace spaces with + signs, so it may be helpful to perform an additional replacement of %20 with + after using encodeURIComponent().

Answer 4

Correct, when using Content-Type: application/x-www-form-urlencoded, any '+' symbols represent spaces. To properly encode these, utilize the function encodeURIComponent().

let params = Object.entries({ username, password, email })
  .map(pair => pair.map(encodeURIComponent).join('='))
  .join('&');

Referencing the MDN documentation:

For application/x-www-form-urlencoded, it is necessary to replace spaces with + signs, so it may be helpful to perform an additional replacement of %20 with + after using encodeURIComponent().

Email address string loses the '+"' when using AJAX

Answer №1

Answer №2

Similar questions

Tips for organizing JSON information in ReactJS

Using Ajax (Jquery) to send data to a PHP script

I'm having trouble using Discord.js to set up a custom role with specialized permissions for muting users

The state variables of React components do not always retain their most recent value

Creating visualizations by overlaying shapes onto images using specified coordinates in jQuery

Combining FusionCharts with PHP and Ajax

Using Unicode JSON in Laravel blade to pass data to React components, encountering an issue with JSON parsing

How to change the focus on a Material UI input field

"Troubleshooting: Why is the onError event not triggering

php utilizing ajax for handling multiple data requests

Unique alphanumeric code following the inclusion of a JavaScript file

Randomly, an AJAX request sent from Internet Explorer 11 to a node.js server operating behind an Apache proxy may abruptly terminate

Tips for effectively utilizing MeteorPad: (Note: ensure to use at home instead of at work due to potential firewall or proxy issues)

Implementing a Javascript solution to eliminate the # from a URL for seamless operation without #

What is the best way to apply a mask to a textbox to format the date as MM/yyyy using a mask

The total height of an HTML element, which takes into account the margin of the element itself

Tips for extracting HTML entities from a string without altering the HTML tags

Is it possible to determine if a selected date falls within the current week using JavaScript?

Adding a unique key to every element within a JavaScript array

Strategies for re-rendering a React component when the useState value remains the same or retains its previous value