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 网络请求,然后是一个点击操作的失败重定向。
我有一个表单,其中提交通过 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 网络请求,然后是一个点击操作的失败重定向。