Post 使用 AJAX 形成数据并通过一次提交触发 PHPExcel 操作

Post form data with AJAX and trigger PHPExcel action with one submit

我有一个表单,其中提交通过 AJAX 发布数据,然后刷新 div 而无需重新加载完整页面。到目前为止一切正常,并且运行良好。

我的问题:我需要在此表单中添加第二个操作。 相同的价值观但不同的行动。 这两个动作单独运行时效果很好,但我无法让它们在同一个提交中运行。

第二个操作是生成带有 PHPExcel 的 xls 并触发下载的脚本。

如何将以下 process_xls.php 包含到 AJAX 中,以便通过相同的提交触发它?

process_xls.php

$year = $_POST['year'];
$nmbr = $_POST['nmbr'];
$code = $_POST['code'];

include("excel/PHPExcel.php");

$objPHPExcel = new PHPExcel();

// ....
// code creating xls here
// ....

header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-Disposition: attachment;filename="Summary.xlsx"');
header('Cache-Control: max-age=0');

$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
$objWriter->save('php://output');
exit;

HTML:

<div id="container">
 <form id="form_year" method="post">
 <input type="hidden" name="year" value="2015">
 <input type="hidden" name="nmbr" value="22">
 <input type="hidden" name="code" value="5Tvfr5T">
 <div class="button-small"><input type="submit" name="" value=""></div>
 </form>

 // ....
 // some data displayed here
 // ....

</div>

(class“button-small”仅适用于CSS)

Javascript

<script type="text/javascript">
$(document).ready(function()
{
 $(document).on('submit', '#form_year', function()
 {      
  var data = $(this).serialize(); 

  $.ajax({  
  type : 'POST',
  url  : 'process_year_data.php',
  data : data,
  success :  function(data)
   {
    $("#form_year").fadeOut(500).hide(function()
    {
     $("#container").fadeIn(500).show(function()
     {
     $("#container").html(data);
     });
    });
   }
  });
  return false;
 });


});
</script>

非常感谢任何帮助!

我认为开始时最好只针对单一表单,而不是查看文档并再次针对它。

通过将 return false 移动到 if 语句中,我们确保不会阻止表单的默认方法。有一些关于事件预防的阅读 here

$(document).ready(function(){
    var posted = false;
    $('#form_year').submit(function(){
        if (!posted) {
            var data = $(this).serialize();
            $.post('process_year_data.php', data, function(data){
                $("#form_year").fadeOut(500).hide(function(){
                    $("#container").fadeIn(500).show(function(){
                        $("#container").html(data);
                    });
                });
            });
            posted = true;
            return false;
        }
    });
});

我还创建了一个 JSFiddle 如果您使用开发人员工具,您应该会看到一个 404 网络请求,然后是一个点击操作的失败重定向。