我有一个表单,其中提交通过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>
任何帮助都非常感谢!
答案 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网络请求,然后是一个失败的重定向操作。