Ajax send HTML data with post but $_POST empty

Question

I am trying to send the HTML structure from an iframe via ajax POST to php, but $_POST is always null.

Ajax

function makePDF(){
     var f = $('#iframe1');
     var data = f.contents().find('body').html();
     var html = escape(data);
     alert(html);
     
     
     
     $.ajax({
         type: "POST",
         url: "pdf.php",
         data: {'html': html},
         cache: false,
         success:function(){
                             alert('done');
             document.location.href='pdf.php';
            
         },
         error: function(){
             alert('error');
             }
     });
 }

This function is called via onClick.

HTML

<input id="btnpdf" class="btn btn-primary btnpdfh" type="button" value="Generate Preview as PDF" name="PDF" onClick="makePDF()">

pdf.php

<?php 
   echo 'Test<br>=';
   $pdf = $_POST['html'];
   echo $pdf;
?>

Firebug shows that the post request is made and the data was send but $pdf stays empty, only the normal echo is displayed. I need the HTML structure of the iframe to generate an PDF.

any help is appreciated, thanks.

Did you try htmlentities for $pdf, As it is possible that no displayable content is in $pdf. — kuldeep.kamboj, Jun 25 '13 at 07:53
`data: {'html': html},` is better written as `data: {html: html},` — DevZer0, Jun 25 '13 at 07:55
@DevZer0 Why better? It *can* be written like that, but that can be confusing because then someone will assume that `{foo-bar: 'stuff'}` works as expected (which it introduces ambiguity so it won't). There is a reason why the JSON standard requires that all object keys be quoted. — Bailey Parker, Jun 25 '13 at 08:08

score 2 · Accepted Answer · edited May 23 '17 at 12:17

You need to research the lifecycle of a PHP request. When you submit your ajax request, the success callback is called with one argument contained the output you expect:

Test<br>=<html data here>

But, when you redirect to pdf.php, you are in effect sending another request. This other request has no post variables so $_POST['html'] is an empty string.

Try changing the success function to this:

succes: function(data) {
    console.log(data);
    alert('Done!');
}

Then, open the page. Once you see "Done!", check the javascript console in firebug. You should see your expected result.

Here's a timeline of what your page does:

makePDF() is called POST request is sent to pdf.php with POST variables: {html: 'content goes here'}
pdf.php returns Test<br>=content goes here
The AJAX request calls your success function with the first argument being return value of pdf.php (Test<br>=content goes here)
Your javascript redirects the user agent to pdf.php
GET request is made to pdf.php with NO variables
pdf.php returns (and shows in your browser) Test<br>= because $_POST['html'] is empty at this point

Now why the second time does pdf.php not return the value it returned the first you ask? Because HTTP is a stateless protocol. That means one request to pdf.php is entirely different from another. Without the use of GET, POST, or SESSION variables (cookies included), one request to pdf.php has no knowledge to any other requests to pdf.php.

Also, I believe you are misusing AJAX in this instance. The intent of AJAX is to perform requests to the server without having to navigate to a new page. You should either perform the ajax request and then take the returned data and inject it into the current page (you can use the first parameter passed to the success function) or forego AJAX altogether and just redirect to pdf.php.

score 1 · Answer 2 · answered Jun 25 '13 at 07:55

Your ajax is working but you don't do anything with the response. Instead you redirect to pdf.php. When you redirect in the success handler, you are doing a completely separate HTTP request, the POST data is now gone from the previous request, that is why after the redirect $_POST['html'] is empty.

Try doing something with the response:

     success:function(response){ // <-- capture response
         alert('done' + response);
         document.location.href='pdf.php';

     },

Ajax send HTML data with post but $_POST empty

Ajax

HTML

pdf.php

2 Answers2