如何通过 AJAX 从 PHP 脚本下载 CSV 文件？

Question

所以我想下载一个 CSV 文件，该文件是通过单击按钮由我的 PHP 文件创建的。

以前，这很容易，因为我可以直接输入

<form action="working_csv.php method="post">

它会将用户重定向到“新页面”并下载我的 CSV 文件。

这是“working_csv.php”的内部结构。

I use the $_POST['location'] and $_POST['filter'] data 

earlier in the file, but it's too big of a file, so I omitted that part.

  echo "Amount of entries: ".(sizeof($myarray))."\n";

  $output = print_r($myarray, true);

  $filename = "output.csv";

  header('Content-Type: text/csv');

  header('Content-Disposition: attachment; filename="' . $filename . '"');

  header("Content-Length: " . strlen($output));

  echo $output;

  exit;

但现在，我的表单中有 2 个按钮，一个用于在屏幕上显示输出，另一个用于将相同的输出下载为 CSV 文件。

这是我的 home.php 文件中当前代码的样子

 <div class="container">

    <form>      

      <h2><strong><p>Search the LDAP server</p></strong></h2>

      <label for="location"><p>Enter your search location (ex: dc=example,dc=com)</p></label>

      <input type="text" id="location" name="location" placeholder="Search Location..">

      <label for="filter"><p>Enter your search filter(s) (ex: uid=* or </p></label>

      <input type="text" id="filter" name="filter" placeholder="Filter(s)..">

      <input type="submit" name="search" id="search" value="Search LDAP Server" onclick="return chk()">

      <input type="submit" name="download" id="download" value="Download results as CSV file" onclick="return chek()">

    </form>

    <!-- Here's the AJAX call function. -->

    <p id="msg"></p>

  </div>

  <script>

    function chek()

    {

      var location=document.getElementById('location').value;

      var filter=document.getElementById('filter').value;

      var download=document.getElementById('download').value;

      var dataString={location:location, filter:filter, download:download};

      $.ajax({

        type:"post",

        url: "working_csv.php",

        data:dataString,

        cache:false,

        success: function(html){

          $('#msg').html(html);

        }

      });

      return false;

    }

  </script>

我的问题是，当我的 AJAX 函数被调用时，它只是输出结果而不是下载 CSV 文件。

Answer 1

根据我的评论，我将使表单能够正常提交或使用 ajax 提交。Ajax进行搜索，正常提交下载：<div class="container">&nbsp; &nbsp; <!-- Make this a proper form tag again -->&nbsp; &nbsp; <form id="ldap-form" method="post" action="working_csv.php">&nbsp; &nbsp; &nbsp; &nbsp; <h2><strong><p>Search the LDAP server</p></strong></h2>&nbsp; &nbsp; &nbsp; &nbsp; <label for="location"><p>Enter your search location (ex: dc=example,dc=com)</p></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="location" name="location" placeholder="Search Location.." />&nbsp; &nbsp; &nbsp; &nbsp; <label for="filter"><p>Enter your search filter(s) (ex: uid=* or </p></label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="filter" name="filter" placeholder="Filter(s).." />&nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" name="search" id="search" value="Search LDAP Server" />&nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" name="download" id="download" value="Download results as CSV file" />&nbsp; &nbsp; </form>&nbsp; &nbsp; <!-- Response container -->&nbsp; &nbsp; <p id="msg"></p></div><script>&nbsp; &nbsp; $(function(){&nbsp; &nbsp; &nbsp; &nbsp;$('input[type="submit"]').on('click', function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Stop form from submission&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Detect button press type&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;let thisSubmission&nbsp; &nbsp;=&nbsp; &nbsp;$(this).attr('name');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// If the button is search, do ajax&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(thisSubmission == 'search') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "post",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: $('#ldap-form').attr('action'),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $('#ldap-form').serialize(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(html){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#msg').html(html);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// Just submit the form normally&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('#ldap-form').submit();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; });</script>