passing large data to php server

[esolve]

I have a javascript script which obtains a lot of data
about 20 variables, 2 arrays with hundreds of or even more than 1000 elements.
I want to pass these values to a php server and let php server write them to files(not sql database) on the server

I know I need to use ajax, or json but I'm new to javascript and time is a bit urgent, I hope I can finish this task asap

are there any good articles, examples on this?
thanks!

[Old Pedant]

Why do you need to use AJAX? (And JSON is just an encoding, not a way to send data in and of itself.)

Just put the data into a hidden <form> field where you are using <form method="post"> and submit the form to your PHP page.

Let your PHP code handle the decoding of the form field.

Or use multiple hidden <form> fields, for that matter, putting one form element into each field. Or or or.

I would guess the multiple <form> fields would be the fastest way to get it up an running:

function putArrayInForm( fldName, theArray )
{
    var f = document.getElementById("yourFormID");
    for ( var a = 0; a < theArray.length; ++a )
    {
        var fld = document.createElement("INPUT");
        fld.name = fldName + "[]"; // PHP requires the [] for multiple same name elements
        fld.type = "hidden";
        fld.value = theArray[a];
        f.appendChild(fld);  
    }
}
 
...
var yourArray = ["some","data","lots","of","elements"];

putArrayInForm( yourArray, "misc" );

Now your PHP code can process that multiply-named field the same way it would any other. You are done.

[rnd me]

<form id="yourFormID" method="POST" action="/test/myphp.php" ></form>

function sendArray( theArray )
{
    var frm = yourFormID,
        fld = document.createElement("INPUT");
        fld.name ="data"; 
        fld.type = "hidden";
        fld.value = JSON.stringify(theArray);
        frm.appendChild(fld);  
        frm.submit();
}
 
var yourArray = ["some","data","lots","of","elements"];

sendArray( yourArray );

i fixed the argument order typeo and converted it to JSON, which is simpler and faster than loops and dom manipulation.

use

PHP Code:

json_decode( $_POST['data']) 


or something like that and file_put_contents()? to save it on the server.

[Old Pedant]

Personally, depending on what the data consisted of, I wouldn't have bothered with either multiple fields *or* JSON.

If, for example, the data is all numeric, I would have just dumped it into a hidden field as a comma-delimited string.

But he gave us virtually nothing to go on, so any guess is just a guess.

[esolve]

this is really good
but when I post to the php file, the php page will be automatically displayed on the browser in place of the original html page, how to prevent this happening, so the original html page won't get disturbed?

Originally Posted by rnd me

<form id="yourFormID" method="POST" action="/test/myphp.php" ></form>

function sendArray( theArray )
{
    var frm = yourFormID,
        fld = document.createElement("INPUT");
        fld.name ="data"; 
        fld.type = "hidden";
        fld.value = JSON.stringify(theArray);
        frm.appendChild(fld);  
        frm.submit();
}
 
var yourArray = ["some","data","lots","of","elements"];

sendArray( yourArray );

i fixed the argument order typeo and converted it to JSON, which is simpler and faster than loops and dom manipulation.

use

PHP Code:

json_decode( $_POST['data']) 


or something like that and file_put_contents()? to save it on the server.

[Old Pedant]

A couple of ways.

One way is, indeed, to use AJAX.

The other way is to have a hidden <iframe> and post to that iframe.

<form id="yourFormID" method="POST" action="/test/myphp.php" target="HIDDENFRAME">

...

<iframe name="HIDDENFRAME" style="display: none;"></iframe>

I, personally, like using a hidden iframe because it makes debugging easy: While you are developing the stuff, do *NOT* hide the iframe. And then you can have your PHP code display debug messages, progress messages, error messages, etc., and they will all be visible in the iframe. After it works, you just change to display: none and you don't even have to remove all those messages. They simply won't show. And the best part is, if you ever later have a problem, you simply remove the display: none to see the debug et al. messages again.

[rnd me]

you can use ajax as well, but it will add some degree of complication to the code you have going already. i think it's a better way of doing things than a form submit; you have options to monitor progress, there is no URL bar change by default, and you have more fine-grained control of the actual data being sent. You might not need those features.

For a simple project that's not going to be heavily maintained stick with what works for you.

[Old Pedant]

> you have options to monitor progress,

Not as many as when you use an <iframe>. There, your PHP server code can send anything back at any time (and presumabley flush the response buffer to ensure it is shown immediately). But yes.

> there is no URL bar change by default,

Won't be any when using an <iframe>, either.

> and you have more fine-grained control of the actual data being sent.

I'm not clear why you say that is true. You can enable/disable form fields, for example, to control what is sent. You can add form fields dynamically. It is true that it *MIGHT* be a tad simpler to do so with AJAX (depends on circumstances), but that's about it.

**********

In any case, either AJAX or hidden <iframe> work. So it's really a matter of preference.

[rnd me]

Originally Posted by Old Pedant

> you have options to monitor progress,

Not as many as when you use an <iframe>. There, your PHP server code can send anything back at any time (and presumabley flush the response buffer to ensure it is shown immediately). But yes.

> there is no URL bar change by default,
Won't be any when using an <iframe>, either.

> and you have more fine-grained control of the actual data being sent.
I'm not clear why you say that is true. You can enable/disable form fields, for example, to control what is sent. You can add form fields dynamically. It is true that it *MIGHT* be a tad simpler to do so with AJAX (depends on circumstances), but that's about it.

it's not that one can't do many if not all the same things in a form/iframe as with ajax, it's that ajax provides a TON of built-in functionality that you don't have to re-invent.

i used to be all about jsonp and forms, until cors became universal and i realized just how much i had been missing.

While i agree that it's easier to get started with forms and frames, building a robust, scalable, and testable web application is easier with ajax for a lot of reasons.

in short, ajax leverages lot's of existing infrastructure that high-level abstractions like jsonp and iframes don't provide.


off the top of my head, compared to iframe/jsonp, ajax provides:

1. an HTTP response status code (200, 204, 404, 302, etc)
2. standardized state indication (readyState)
3. intrinsic state change event handling ( onreadystatechange )
4. ability to perform sync/async requests
5. ability to set custom HTTP request headers
6. ability to get HTTP response headers
7. ability to send logically unescaped binary data (FormData, blob, text, document, etc)
8. choice of return flavors (text, xml, ArrayBuffer, blob, etc)
9. progress events are nice for UI and require no server-side code
10. optional history item addition using pushState vs iframe's forcible creation

[Old Pedant]

Absolutely no argument

But as a practical matter, since he seems completely uninterested in knowing WHAT the response from the server was, the only one that MIGHT apply is number 7. And whether even that applies or not depends on the kind of data he is trying to send.