如何通过 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">

    <!-- Make this a proper form tag again -->

    <form id="ldap-form" method="post" action="working_csv.php">

        <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" />

        <input type="submit" name="download" id="download" value="Download results as CSV file" />

    </form>

    <!-- Response container -->

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

</div>

<script>

    $(function(){

       $('input[type="submit"]').on('click', function(e){

           // Stop form from submission

           e.preventDefault();

           // Detect button press type

           let thisSubmission   =   $(this).attr('name');

           // If the button is search, do ajax

           if(thisSubmission == 'search') {

                $.ajax({

                    type: "post",

                    url: $('#ldap-form').attr('action'),

                    data: $('#ldap-form').serialize(),

                    cache: false,

                    success: function(html){

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

                    }

                });

           }

           else {

               // Just submit the form normally

               $('#ldap-form').submit();

           }

       });

    });

</script>