在ajax表单中使用“＆”提交

Question

I am submitting a form using .ajax() .

The current script contains:

data: dataString,

dataString contains:

var list    = $('.listsummary').val()

The class listsummary belongs to a textarea which users fill in, or will be (partially) filled in dynamically through a different script.

The problem is that users nearly all of the time use the '&' sign, for example:

Potato & Patota blah blah blah

This screws up the dataString allowing to post everything written before the first '&' is found.

How can I achieve that the var list will be properly sent to the PHP handler in order to store the entire textarea content into the database WITH the use of '&'?

Answer 1

You can encode the string with encodeURIComponent()

var list = $('.listsummary').val();
var urlEncoded = encodeURIComponent(list);

Answer 2

You have 2 options. Either pack the data as an object:

data: { list: $('.listsummary').val() }

Or encode the URI components:

var dataString = "list=" + encodeURIComponent($('.listsummary').val());

Answer 3

Welcome to the world of injections. This is a simple problem, but there are multiple approaches that you can take:

1. If your data is simple unstructured text, you should set contentType to text/plain or application/octet-stream:

    $.ajax({ .... data: "Hello & world", contentType: "text/plain", ... }); 

2. If your data is key values structured, then you should encode your data as application/x-www-form-urlencoded. This can be achieved in JQuery by passing a JavaScript key-value object to data:

    $.ajax({ .... data: { text: "Hello & World", location: "Boston" }, ... }); 

3. If your data has more complex structure, you should encode your data in the most appropriate Content Type (eg JSON, XML, CSV) and set contentType to (eg "application/json", "application/xml", "text/csv")

    $.ajax({ .... data: JSON.stringify(["Hello & world", {"Hello & World"}]), contentType: "application/json", ... }); 

--

On the PHP side, if you need to process anything other than application/x-www-form-urlencoded, you'll need to read the request body directly as a string. Which can be fine with this code:

$body = file_get_contents('php://input');

Or if you have PECL:

$body = http_get_request_body();

If you use a web framework, they probably also have ways to process custom content types. Check the documentation of your web framework.