Helpful Information
 
 
Category: Ajax and Design
Sending Large amounts of text via AJAX/PHP

Background:
I have a page that list hundreds of records for a user to browse for editing. When editing a <div> is toggled that allows easy editing (the div is actually just set with display:none on the page).
When the user is done, they click Save to hide the div and send the edited data to a MySql database without refreshing the page via AJAX/PHP.
All of AJAX/PHP code is working...works fine as long as the text is small.

Problem:
The text to be edited can be quite large (as much as 5,000 characters), so using a GET parameter is problematic.

Question:
Is it possible to use AJAX/PHP to grab the data from the page? Or is this just a bad design on my part?

It's entirely possible to use HTTP POST for this kind of situation. One thing to consider though, is that you should avoid sending too much information from the client to the server. It's not uncommon, especially for DSL connections but also for fiber and copper, that connections are assymetric. My parents have a 5 Mbit downstream connection but just 250 kbit upstream connection, for example.

One example is an AJAX site for collaboratively editing SVG that I helped with the scripting for. We found that some users (me among them) had strangely bad transmit rates even though they were sitting on very fast connections. The reason turned out to be that we were actually gated on upload speed and not download speed because we sent very much information both directions.

That's encouraging. I don't think we'll have a problem with data xfer since it's all text/html, but will watch that.

I'm glad POST will work, but I don't know how to retrieve the $_POST var on the php script that the JavaScript request is calling.

I'm using the prototype library, so here's my call:

var url = 'saveActionItem.php?divID='+id+'&key='+myKey+'&itm='+myItm;
var myAjax = new Ajax.Request(
url, { method: 'post',
onComplete: update_page
});

The $_GET params are designed to control my sql query.

On the php side, I grab the text using:
$actTxt = $_POST['validFormVar'];

However, the $_POST var is not set, so $actTxt="" and my update essentially deletes the text.

Can you point me in the right direction?

I think the function is stringtoQuery or something. I will find out and edit. Once sec.

EDIT: query = formID.toQueryString()

Then put in your call... "postbody: query"

Thats the function you need to post the information.

Thanks for the post, but I'm still fighting this issue.

formID.toQueryString() produces the error: myFrm.toQueryString() is not a function

in this case, i create a reference to the form using:
var myFrm = document.getElementById('frm'+myKey+myItm);
// alert(myFrm.length);
var query = myFrm.toQueryString();

(the alert was here to check that I got the form)

It looks like toQueryString is designed to create a query string from a hash. Seems like that would still end up hitting the 2048-char query string limit and my text often contains an average of 2428 characters with a current max of 14,604 characters










privacy (GDPR)