javascript - 如何在提交后重新加载包含包含内容的 div，甚至刷新整个页面？-6ren

javascript - 如何在提交后重新加载包含包含内容的 div，甚至刷新整个页面？

转载作者：行者123 更新时间：2023-12-03 04:18:20

抱歉这么长的解释，但在过去的两天里，我一直在解决这个问题，并尝试了各种方法来刷新我的动态表或页面，但没有成功。本期包括 3 页，第一页包含在 Div 中加载 3 个不同的页面(这些页面每个都有一个从目录加载特定文件列表的表)，div 也可以通过下拉列表在每一行中显示/隐藏有一个删除按钮，它将删除 aws 存储桶目录中的文件并从表中删除该行。

问题是当我单击“删除”时，它将从目录中删除该文件，但不会删除该行(这在实际页面上时有效如果我刷新页面或再次单击“删除”，则该行将被删除，并且不会通过 include 加载到 div 标签中)。顺便说一句，上传工作完美，我有 tride.location、jquery、javascript、ajax，尝试在调试中单步执行代码。我已经将ajax等..放在echo之前和之后的deletes3file.php中，也在每个包含之前和之后以及每个php文件中。我应该提到的一件事是，deletes3file.php 会弹出一个回显，所以一旦我点击“确定”，就是当我想从表中删除该行时。

第 1 页:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="CSS/styles.css" /> 
        <link rel="stylesheet" type="text/css" href="CSS/panels.css"/>

    <body>
        <!-- Begin Wrapper -->
        <div id="wrapper">
         <!-- Begin Header -->
        <div id="header">
                <ul>
                    <li>
                    <a href="index.php">Home</a> 
                    <div class="cp-thumb">
                <div class="cp-hover">
                <?php
                  echo gethostname()
                ?>
            </div>
            </div>
                    </li>
                </ul>
            <div><a href="index.php" id="top-img"></a></div>
        </div>
    <!-- End Header -->

            <!-- Begin Content -->
        <div id="content">


<div id="dirlist">
<h2>Select Folder to upload to</h2>

<form action="uploads3.php" method="post" enctype="multipart/form-data" name="form1" id="form1"
    <input type="hidden" name="method" value="post" />
      <select id="bucketName" name="bucketName">                 
        <option value="0">--Select Folder--</option>
        <option value="Policy">Policy</option>
        <option value="Program">Program</option>
        <option value="Procedures">Procedures</option>
     </select>
      <input name="theFile" type="file" />
      <input name="Submit" type="submit" value="Upload">


    <script type="text/javascript">
  document.getElementById('bucketName').addEventListener('change', function() {
     var style = this.value == "Policy" ? 'block' : 'none';
  document.getElementById('Policy').style.display = style;
     var style = this.value == "Program" ? 'block' : 'none';
  document.getElementById('Program').style.display = style;
     var style = this.value == "Procedures" ? 'block' : 'none';
  document.getElementById('Procedures').style.display = style;
});
</script>
</form>

</div><!-- End dirlist -->


<div id="Policy" style="display: none;">
<p><?php
include 'policy.php';
?></p>

</div>

<div id="Program" style="display: none;">
<p><?php
include 'program.php';
?></p>
</div>

<div id="Procedures" style="display: none;">
<p><?php
include 'procedures.php';
?></p>

</div>



     </div><!-- End Content -->
        </div><!-- End Wrapper -->


    </body>
</html>

删除页面:

<?php
if(isset($_POST['bucketName'])){
$bucketName = $_POST['bucketName']; 
}

$fname = $_POST['fname'];

include 'awss3con.php';
if($_POST){

if ($s3->deleteObject( $bucketName, $fname, S3::ACL_PUBLIC_READ)) {


                    echo "We successfully deleted your file $bucketName / $fname";

                }else{
                    echo "Something went wrong while delteing your file. $fname sorry.";
                }

    }

?>

其中的页面包括:

<?php
$ignore = Array(".","..");
$count=1;
include 'awss3con.php';

// Get the contents of our bucket
echo '<form action="deletes3file.php" method="post" enctype="multipart/form-data">';
 echo '<table id=db-table border=1>';
 echo '<th colspan=3 style="text-align:center;">Policies</th>';
  $contents = $s3->getBucket("MyBucket",'Policy');
    foreach ($contents as $file){
 //if(!in_array($file, $ignore));
  if(!isset($flag_first)){
    $flag_first=1;
     continue;
     }

        $fname = $file['name'];
        $furl = "https://s3.amazonaws.com/MyBucket/".$fname;
        $newname = explode('/', $fname);
        $fname = $newname['1'];
        $bucketName = "MyBucket/Policy";
        //output a link to the file
        /*echo "<tr id='del$count'><td>$count</td><td><input type='submit' name=$furl index=$count value='delete' onclick='deleteFile(\"$dispimage\",$count,\"$directory\");> <a href=\"$furl\">$fname</a>
        <input type='text' id=$count value=$furl name='furl' visible=''></td></tr>";*/
         echo "<tr id='del$count'><td>$count</td><td>$fname</td><td><input type='button' id='delete$count' value='Delete' onclick='deleteFile(\"$fname\",$count,\"$bucketName\");'></td></tr>";
        $count ++;

    }
    echo '</table>';
    echo "</form>";

        ?>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function deleteFile(fname,rowid,bucketName)
{
    $.ajax({ url: "deletes3file.php",
        data: {"fname":fname,"bucketName":bucketName},
        type: 'post',
        success: function(output) {
          alert(output);
          $("#del"+rowid).remove();
        }

    });

}
</script>

最佳答案

而不是在 HTML 中附加事件处理程序并传递参数:

使用 HTML5 data 属性将数据与 HTML 元素关联起来。
在 JavaScript 中附加事件处理程序。

这是更好的做法，因为它将文档结构与动态功能分开，从而提高了 HTML 和 javascript 的可读性。

因此，按如下方式构建行:

 echo "<tr data-fname=\"$fname\" data-bucket-name=\"$bucketName\"><td>$count</td><td>$fname</td><td><input class=\"deleteFile\" type=\"button\" value=\"Delete\"></td></tr>";

注意:不需要任何 ID

并编写相应的脚本如下:

jQuery(function($) {
    $(".deleteFile").on('click', function(event) {
        event.preventDefault(); // probably not necessary but won't do any harm.
        var $row = $(this).closest('tr'); // the clicked button's row.
        $.ajax({
            'url': 'deletes3file.php',
            'data': $row.data(), // the data object is composed for you automatically
            'type': 'post',
            'success': function(output) {
                $row.remove(); // here, you already have a reliable reference to the row that is to be deleted, so just remove() it.
            }
        });
    })
});