CODEWITHSUNDEEP
phpjqueryajax
user2518927
user2518927

Reputation: 13

Ajax send HTML data with post but $_POST empty

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.

Upvotes: 1

Views: 5064

Answers (2)

Bailey Parker
Bailey Parker

Reputation: 15905

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:

  1. makePDF() is called POST request is sent to pdf.php with POST variables: {html: 'content goes here'}
  2. pdf.php returns Test<br>=content goes here
  3. The AJAX request calls your success function with the first argument being return value of pdf.php (Test<br>=content goes here)
  4. Your javascript redirects the user agent to pdf.php
  5. GET request is made to pdf.php with NO variables
  6. 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.

Upvotes: 2

MrCode
MrCode

Reputation: 64526

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';

     },

Upvotes: 1

Related Questions