如何防止加载多个脚本文件

我有一个网站，我可以在其中选择一个Excel文件。选择后，我将文件数据打印在文件选择下的html表中(用于检查和编辑)。表格下方是一些按钮，其中之一是将表数据上传到数据库。为此，我将通过按钮单击到JS函数，在该函数中，我将表数据存储在多维数组中。为了上传数据，我将数组发布到我的php文件。成功上传后，我想显示一个模态。这就是我的问题所在：模态没有出现。
这是我的缩短代码：

首页.php(带有文件选择的网站的 HTML)

<!doctype html>
<html lang="de">
<head>
<script src="../js/bootstrap/jquery.slim.min.js"></script>
<script src="../js/bootstrap/popper.min.js"></script>
<script src="../js/bootstrap/bootstrap.min.js"></script>
<script src="web.js"></script>
</head>
<body>
<div class="container">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Datei auswählen&hellip; <input type="file" name="file" style="display: none;">
</span>
</label>
<input type="text" class="form-control" readonly>
</div>              
</br>
<button id="excelBtn" type="submit" class="btn btn-success btn-block">Excel-Datei anzeigen</button>                                                        
</form>
<?php
if(isset($_FILES['file'])){     //executed after fileselect 
include "upload.php";      //show file as table on website, works fine
}
if(isset($_POST['data'])){     //is executed when returning from JS
//upload all array data
//after successful upload do:
include "modal_success.php";  //this php works, will not show extra
}
?>
</div>
</body>
</html>

编辑： modal_success.php

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Speichern</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Die Daten des Mitarbeiters wurden erfolgreich in die Datenbank geschrieben.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" onClick="geheZuHome()">Zurück zur Startseite</button>
<button type="button" class="btn btn-warning" onClick="window.location.href=window.location.href">Weitere Datei hochladen</button>
</div>
</div>
</div>
</div>
<script> 
$("#modal").modal("show");
</script>

上传.php

<!-- print data as table -->
<form  action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<button id="exBtnEnable" type="button" class="btn btn-info btn-block" disabled=false onclick="editTable(<?php echo $taID ?>)">Bearbeiten aktivieren</button>
<button id="exBtnHoch" name="exBtnHoch" onclick="saveInArray()" type="button"  class="btn btn-success btn-block">Excel-Datei hochladen</button>
<button id="exBtnAbbr" type="button" onClick="window.location.href=window.location.href" class="btn btn-secondary btn-block">Abbrechen</button>
</form>

我的网站.js：

function saveInArray(){
//save data in array
var arrString = JSON.stringify(tableData);
var request = new XMLHttpRequest();
request.open('post', 'home.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.send('data=' + arrString);
}

首先我有一个保存.php在那里我上传到数据库，但对于模式来说，它是错误的位置。所以我把所有代码都带回家.php。现在位置是正确的，但它不会再次显示。我认为home.php(bootstrap javascript)中的多个文件绑定可能存在问题。你能证实一下吗？或者我该如何解决它？

这是我接手的一个项目，所以大部分结构已经存在。

在你的home.php变化

中

$_POST['data']

自

$_POST['daten']

或在您的web.js更改中

request.send('daten=' + arrString);

自

request.send('data=' + arrString);

并且模态应该有效。

编辑：

我现在看到了问题。

你在哪里加载你的web.js？
即使调用saveInArray，您也不会对响应执行任何操作。

可能(但脏)的解决方案：

更改web.js

function saveInArray() {
// save data in array
var arrString = JSON.stringify(tableData);
$.post('home.php', {data: arrString}).done(function(response)
{
$('body').html($(response).find('body').html());
});
}

这使用 jQuery 的 post 函数执行 AJAX 调用并替换整个主体。

相关内容

最新更新

热门标签：