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

I have a form where the submit posts data via AJAX and then refreshes a div without reloading the complete page. So far ok and it works perfectly.

我有一个表单,其中提交通过AJAX发布数据,然后刷新div而不重新加载整个页面。到目前为止还可以,它完美无缺。

My problem: I need to add a second action to this form. Same values but different action. Both actions work perfectly alone, but I just can't get them working within the same submit.

我的问题:我需要在此表单中添加第二个操作。相同的值,但不同的行动。这两个动作完全独立,但我不能让它们在同一个提交中工作。

The second action is a script generating an xls with PHPExcel and triggering a download.

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

How do I include the following process_xls.php into the AJAX so it's triggered with the same submit?

如何将以下process_xls.php包含在AJAX中,以便使用相同的提交触发?

The 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;

The 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>

(the class "button-small" is only for CSS)

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

The 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>

Any help greatly appreciated !

任何帮助非常感谢!

1 个解决方案

#1

I think to start with it would be better practice to target just that single form rather than looking into the document and targeting that again.

我认为从一开始就更好的做法是仅针对该单一形式,而不是查看文档并再次定位。

By moving the return false into an if statement we ensure that the default method of the form isn't prevented. There is a bit of reading about event preventing here

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

$(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;
        }
    });
});

I have also created a JSFiddle if you use the developer tools you should see a 404 network request and then a failed redirect that hits the action.

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

#1