Send complex sets of data to php from javascript without ajax

Question

How can javascript pass data, for example from an HTML table, without using AJAX?

I am lacking the understanding of how to actually pull data, format (into json likely), and pass it.

I am trying to pass data to a php function that sends a file to the user to download. (something ajax can't handle as I understand it)

EDIT - please give an example of posting of some rather complex data.

EDIT2 - an exmample...

I populate a table via an ajax response Object. What would be a good way to get this data I am formatting into a form that I can send to a php file via a form?

function getSalesByDeviceComplete(responseObj)
{
  var cashTotal = parseInt(responseObj.data[0].cash_total).toFixed(2);
  var creditTotal = parseInt(responseObj.data[0].credit_total).toFixed(2);
  var grandTotal = (parseInt(responseObj.data[0].cash_total) + parseInt(responseObj.data[0].credit_total)).toFixed(2);
  htmlStr += '<ul>';
    htmlStr += '    <li>';
    htmlStr += '        <table class="ui-widget ui-widget-content contentTable">';
    htmlStr += '            <thead>';
    htmlStr += '                <tr class="ui-helper-reset ui-widget-header">'; 
    htmlStr += '                    <th class="contentTableKey">Payment Device</th>';
    htmlStr += '                    <th class="contentTableValue">Sales</th>';
    htmlStr += '                </tr>';
    htmlStr += '            </thead>';
    htmlStr += '            <tbody>';

        htmlStr += '            <tr>';  
        htmlStr += '                <td class="contentTableKey">Credit Card</td>';
        htmlStr += '                <td class="contentTableValue">$'+creditTotal+'</td>';
        htmlStr += '            </tr>'; 
        htmlStr += '            <tr>';  
        htmlStr += '                <td class="contentTableKey">Cash</td>';
        htmlStr += '                <td class="contentTableValue">$'+cashTotal+'</td>';
        htmlStr += '            </tr>';

    htmlStr += '            </tbody>';
    htmlStr += '            <tfoot>';
    htmlStr += '                <tr>';
    htmlStr += '                    <td></td>';
    htmlStr += '                    <td id="salesTotal" class="contentTableValue">$'+grandTotal+'</td>';
    htmlStr += '                </tr>';
    htmlStr += '            </tfoot>';
    htmlStr += '        </table>';
    htmlStr += '    </li>';
    htmlStr += '</ul>';

    $("#contentData").html(htmlStr);
}

The response object looks something like...

<response_GetSalesByDevice> 
  <data> 
    <cash_total>0.00</cash_total> 
    <credit_total>0.00</credit_total> 
  </data> 
  <success>1</success> 
</response_GetSalesByDevice>

Alas, there are several response objects that are much more complex than this.

Answer 1

By posting form data to a PHP script via the browser, rather than using an asynchronous HTTP request.

Answer 2

The way it "used" to be done (which is of course still very current):

http://www.w3schools.com/html/html_forms.asp

Answer 3

You seem to have some crossed understanding of what AJAX and JSON are/do or most likely I do not understand what you mean from your question. If you do not want to use ajax you will have to use the normal submit just like the two people above me suggested.

However, if you are sending a relatively small amount of data you might be able to send a GET request to your PHP script with ajax, which will then respond with a file. Something like:

http://yourserver.com/test.php?getVariable=29472938472

Test.php script looks at the get variable and returns the associated file. Entirely possible with AJAX.

Please tell me if I've gone down the wrong path.

Answer 4

If by "Without AJAX" you mean without using XMLHttpRequest, then the most common way is to fill a hidden field in a form.

Javascript can change a hidden field, then when the user submits the form as usual, the hidden value is passed through as well.

This can be used for things like gathering stats on screen size etc, which are non-critical and can be passed through when Javascript is enabled, or not when it isn't.

Answer 5

You could post via a form in the usual way.
The form, however, is targeted at a hidden iframe. This way you stay on the current page and the file that the server returns is handled in the usual browser way.

Answer 6

One alternative to XMLHttpRequest objects is making asynchronous calls via an iFrame imbedded in the page. This is a documented "AJAX" design pattern when xmlhttprequests cannot be used. There are some components for jquery (ie, AJAX Upload) that utilize this method.

Documentation and sample here:

http://ajaxpatterns.org/IFrame_Call