Sending HTML data through AJAX to a PHP script

Question

I have created a WYSIWYG text editor for my site and am trying to save the contents to a DB.

I get the contents of my iframe where the text editor is like so:

var product_description = richTextField.document.getElementsByTagName('body')[0].innerHTML;

I then send it via AJAX like so:

var query_string = "product_edit_parse.php?";
query_string += "desc="+product_description;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        console.log(this.responseText);
    }
};
xmlhttp.open("POST", query_string, true);
xmlhttp.send();

However, I get an error

[Deprecation] Resource requests whose URLs contained both removed whitespace (`\n`, `\r`, `\t`) characters and less-than characters (`<`) are blocked. Please remove newlines and encode less-than characters from places like element attribute values in order to load these resources. See https://www.chromestatus.com/feature/5735596811091968 for more details.

What is the best way to handle this data if the file I'm sending to needs to deal with this data in PHP?

You should send the data in the body of the request. Not in the url. — Ivar
– Ivar, Commented Apr 5, 2018 at 14:21
I also agree with @Ivar your ajax request is being sent via post so you should probably send the product description via post as well. — HelloSpeakman
– HelloSpeakman, Commented Apr 5, 2018 at 14:52

HelloSpeakman · Accepted Answer · 2018-04-05 14:17:57Z

1

It's because your string product_description has HTML and whitespace in it, if you want to escape / sanitize this string you can try encodeURIComponent

var product_description = richTextField.document.getElementsByTagName('body')[0].innerHTML;

var query_string = "product_edit_parse.php?";
query_string += "desc="+encodeURIComponent(product_description);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        console.log(this.responseText);
    }
};
xmlhttp.open("POST", query_string, true);
xmlhttp.send();

If you're only grabbing a description of the product I'd encourage you to give the parent element a class or ID so you can grab it specifically

answered Apr 5, 2018 at 14:17

HelloSpeakman

8309 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Sending HTML data through AJAX to a PHP script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related