Sending data through post to php then downloading

Question

I have a theme building website that creates a theme for another project which isn't relevant. I have a few different inputs that have data in them. I am able to get the data and store them in variables. When I click the download button I want the variables to send to a .php file and then download that file. I believe I am sending it ok, but downloading the data seems to be the difficult part.

 $("#download-theme").click(function() {
    $(function() {
        $.ajax({
            type: "POST",
            url: 'download.php',
            data: ({
                value: value
            }),
            success: function(data) {
                alert(data);
            }
        });
    });
});

I believe that this sends it to the download.php file as I get the alert with the correct value. What I want to do next is to download the data of the php file as a .txt file. Maybe i'm over complicating it by sending it to the php file i'm not sure.

All in all, I want to get the data from the variable put it in a file, and have the user download it.

EDIT: I saw quentino response and it works, but I have 5 inputs that I would need to be transferred by one submit button.

<input type="text" name="variable1" />
<input type="text" name="variable2" />
<input type="text" name="variable3" />
<input type="text" name="variable4" />
<input type="text" name="variable5" />
<input type="submit" value="send"/>

You can't download through AJAX. You would need to send a GET request to the location of the file which the PHP code creates. Also note that you don't need the document ready handler inside your click handler, and you can remove the parentheses around the `data` object. — Rory McCrossan, Aug 04 '16 at 10:47
I looked around at that somewhat. I found it confusing on how you would have the client download the file. — Johnson Doe, Aug 04 '16 at 10:50

score 2 · Accepted Answer · answered Aug 04 '16 at 11:20

2

Are you sure you must use ajax? You can do that using hidden form, set data in onclick event and send it. Simple one file example:

<?php
if (isset($_POST['data'])) {
    header("Content-disposition: attachment; filename=\"test.txt.\"");
    echo $_POST['data'];
} else {
?>
<html>
    <body>
        <form method="post"/>
            <input type="text" name="data" />
            <input type="submit" value="send"/>
        </form>
    </body>
</html>
<?php } ?>

answered Aug 04 '16 at 11:20

quentino

1,101
1
10
25

I didnt really want to use ajax but I have 5 different inputs. I couldn't figure out how with one submit button to do it. I would like to have those 5 inputs all be sent, like you have it where the one is being sent, with one click of a button, without having to click 5 different buttons. Is this possible? All I would need done is to have 5 inputs all be able to be echoed like echo $_POST['input1']; echo $_POST['input2']; echo $_POST['input3']; etc. with the push of one button. – Johnson Doe Aug 04 '16 at 11:32
@JohnsonDoe if you add .. in one form all will be sent on one click and you recieve $_POST['input1']; $_POST['input2']; $_POST['input3']; and each can be echoed to file which you return to user. – quentino Aug 04 '16 at 11:43
I cant have them be in the same form due to a lot of other code in the way. Does it matter what other code is inbetween the
tags? Or can I just put those there and call the inputs regardless of what else is in between them. – Johnson Doe Aug 04 '16 at 11:47
@JohnsonDoe you can even send input outside form tag in HTML5 using form attribute `
` – quentino Aug 04 '16 at 11:59

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

From what I have read there is no real way of pulling content through ajax into a downloaded format. I have tested with using Content Disposition and it still does not work.

If you check out: https://stackoverflow.com/a/20830337/3706559

They explain that by changing the window URL you trigger the download. Since the download page doesn't actually have any text content it just has the download it wont actually redirect your user it will just download

score 0 · Answer 3 · answered Aug 04 '16 at 11:24

I don't know if it's exactly what you need, but i try.

function ajaxrequest(){
    $(isset($_POST['yourfirstdata']){
        $yourfirstdata=$_POST['yourfirstdata'];
    }
    $myfile = fopen($_SERVER['DOCUMENT_ROOT'] . "/newfile.txt", "w");
    $txt = "$yourfirstdata";
    fwrite($myfile, $txt);
    exit;
}

this is the possible code to create the file txt. i think that it's necessarily saving on server.

success: function(data) {
     alert(data);
        var a = $("<a>")
        .prop("href", "root-of-your-newfile/newfile.txt")
        .prop("download", "newfile.txt")
        .appendTo("body");
        a[0].click();
        a.remove();
    }

Simply in the 'success' of ajax call, you download the file create.

score 0 · Answer 4 · answered Aug 04 '16 at 11:29

Although the question is bit ambiguous. I am answering what I understand from your question.

Yes you can get a file using Ajax and you are doing it fine. To make browser to download a file you need to pass some headers along with it so that the browser can understand it that way

Use following code to pass headers using PHP (if you are using it server side)

ob_clean();
flush();
$file = "somefile.xlsx";
header('Content-Description: File Transfer');
header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment; filename='.basename($file));
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
readfile($file);

Or you can also pass the same headers using javaScript in success function of Ajax

Sending data through post to php then downloading

4 Answers4