duan20145
2015-10-23 13:50
浏览 49
已采纳

使用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.

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.

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

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)

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条回答 默认 最新

  • dongpou7275 2015-10-23 23:51
    已采纳

    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

    $(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.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题