How to POST using jquery and capture the reply in JSON

Question

I am using this code:

function save() {
    // submit the dataform
    $.post(document.dataform.action, 
        $("#dataform").serialize(),
        function(reply) {
           //handle reply here
    });
}

This sends the right data to the server, but it arrives in $_GET. When I alter the server code to match I get the expected reply. There is a part of the query on the dataform.action. which I expected to arrive in $_GET.

How can I actually get the POST to send the data from the form so it arrives in $_POST, and thus avoid the size restrictions on GET?

I'm testing with Firefox, JQuery 9, and PHP 5.4.3

Thanks, Ian

It would matter if the `
` were still being submitted as part of the normal action of a form submit button, and its "method" were "GET" (which is the default). — Pointy, May 01 '13 at 18:19
Are you preventing the form from submitting? It's possible the original submit is GET thus messing up your POST — David Nguyen, May 01 '13 at 18:20
The form's method is POST. There is no submit button. However there IS a query on the post action. — Ian, May 01 '13 at 18:22
Well `$.post()` uses the "POST" method unconditionally. You can use Firebug to examine the HTTP headers for the actual transaction if you like. — Pointy, May 01 '13 at 18:23
And the data arrives with the $_SERVER['REQUEST_METHOD'] == 'POST', but ALL the form data is in $_GET. I suspect the seriaize puts it there. — Ian, May 01 '13 at 18:25
try `serializeArray()` instead http://api.jquery.com/serializeArray/ then `json_decode()` in php — Waygood, May 01 '13 at 18:26
From the browser, can you tell if the HTTP request has the parameters on the URL (like GET parameters) or in the request body (like a real form POST)? — Pointy, May 01 '13 at 18:32
Can't tell from the browser. PHP reports ALL the data in $_SERVER['QUERY_STRING']. — Ian, May 01 '13 at 18:38
Ian, you *can* tell from the browser. Via Firebug or Chrome's developer tools, you can look at the actual HTTP request header. — Pointy, May 01 '13 at 19:05
serialize shouldn't change the method, if you do a print_r($POST); do you get anything? — David Nguyen, May 01 '13 at 19:28

score 0 · Answer 1 · answered May 01 '13 at 18:16

0

$_GET takes parameter from query string so to have $_POST and $_GET just do this:

var action       = document.dataform.action;
var get_variable = "var1=v1&var2=v2..."; 
action = action+"?"+get_variable;
$.post(action, 
        $("#dataform").serialize(),
        function(reply) {
           //handle reply here
    });

answered May 01 '13 at 18:16

Jayyrus

12,961
41
132
214

document,dataform.actions ALREADY CONTAINS the query string. And I am quite happy for that to be sent urlencoded so it arrives in $_GET. What I need is fort the form *DATA* to be transmitted as if the form had been submitted as normal, and capture the reply – Ian May 01 '13 at 18:45

score 0 · Answer 2 · answered May 01 '13 at 18:34

0

function save() {
    // submit the dataform
    $.post(document.dataform.action, 
        { data: $("#dataform").serializeArray() })
    .done(function(reply) {
           //handle reply here
    });
}

then json_decode($_POST['data']); in PHP

answered May 01 '13 at 18:34

Waygood

2,657
2
15
16

score 0 · Answer 3 · answered May 01 '13 at 19:29

Cracked it! The correct method is

function save() {
    // submit the dataform
    $.ajax({
    url: document.dataform.action,
    data: new FormData(document.dataform),
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(reply){
        if (reply.action) fetch('/content.php',reply.action);
        if (reply.content) document.getElementById('content').innerHTML=reply.content;
        if (reply.menu) document.getElementById('menu').innerHTML=reply.menu;
        if (reply.status) document.getElementById('status').innerHTML=reply.status;
        calcSize();
        }
    });
}

This will however only work with browsers that support FormData - Chrome 7+, FF4.0+, IE 10+, Opera 12+ and Safari 5+
OK for my use-case ;) Thanks for everyone's input.

Credit to Ralph for his answer at http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax — Ian, May 01 '13 at 19:42

How to POST using jquery and capture the reply in JSON

3 Answers3