使用AJAX发布表单数据并使用一个提交触发PHPExcel操作

时间:2015-10-23 13:50:03

标签: javascript php ajax form-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>

(班级&#34; button-small&#34;仅适用于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>

任何帮助都非常感谢!

1 个答案:

答案 0 :(得分:0)

我认为首先,最好只针对该单一表单而不是查看该文档并再次定位该文档。

通过将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网络请求,然后是一个失败的重定向操作。