在 HTML 文件中重新运行 PHP 脚本而不重新加载页面答案

【问题标题】：Rerun PHP Script inside HTML file without reloading page在 HTML 文件中重新运行 PHP 脚本而不重新加载页面
【发布时间】：2021-07-11 21:15:36
【问题描述】：

我想重新运行在我的 HTML 代码中加载到 div 中的 PHP 文件。在我的主页上，我有一个表格和一个表格。表单向 MySQL 表添加行，页面上的表输出该 MySQL 表。我希望在通过表单添加新行时更新 HTML 页面上的表格，而不刷新页面。我尝试将加载命令放在我的表单的 ajax 函数的成功部分，但这没有用。我查看了许多其他答案，但没有一个对我有用。

这是我的代码

redeem.php

        <h1>Rewards</h1>
        <form id="add-reward-form" action="" method="POST">
                <label for="inputRewardDescription" class="form-label">Enter Reward Description</label>
                <input type="text" id=inputRewardDescription name="description" class="form-control" required>
                
                <label for="inputRewardCost" class="form-label">Enter Reward Cost</label>
                <input type="text" id=inputRewardCost name="points" class="form-control" required>
    
                <button type="submit" class="btn btn-success" id="submit-btn">Save</button>
        </form>  
        <p id="message"></p>
        <div id="sql-table">
            <?php include 'tables.php'; ?>
        </div>

tables.php

<?php
        $host    = "";
        $user    = "";
        $pass    = "";
        $db_name = "";

        //create connection
        $connection = mysqli_connect($host, $user, $pass, $db_name);

        //test if connection failed
        if(mysqli_connect_errno()){
            die("connection failed: "
                . mysqli_connect_error()
                . " (" . mysqli_connect_errno()
                . ")");
        }

        //get results from database
        $result = mysqli_query($connection,"SELECT RewardName, PointsRequired FROM rewards");
        $all_reward = array();  //declare an array for saving property
            while ($reward = mysqli_fetch_field($result)) {
                // echo '<th scope="col">' . $reward->name . '</th>';  //get field name for header
                array_push($all_reward, $reward->name);  //save those to array
            }
            // echo '      </tr>
            //         </thead>'; //end tr tag
            echo '<table class="table">
            <thead>
                <tr>
                <th scope="col">Reward</th>
                <th scope="col">Points Required</th>
                <th scope="col">Edit</th>
                <th scope="col">Delete</th>
                </tr>
            </thead>';
    
            //showing all data
            while ($row = mysqli_fetch_array($result)) {
                echo "<tbody>
                        <tr>";
                foreach ($all_reward as $item) {
                    echo '<td>' . $row[$item] . '</td>'; //get items using property value
                }
                echo '<td><i class="fas fa-edit"></i></td>';
                echo '<td><i class="fas fa-trash"></i></td>';
                echo '  </tr>
                    </tbody>';
            }
            echo "</table>";
    ?>

redeem-form.js

$(document).ready(function() {
    $("#add-reward-form").submit(function(e) {
        e.preventDefault();
        $.ajax( {
            url: "add_rewards.php", 
            method: "POST",
            data: $("form").serialize(),
            dataType: "text",
            success: function(strMessage) {
                $("#message").text(strMessage);
                $("#add-reward-form")[0].reset();
                $("#sql-table").load(" #sql-table > *");
            }
        });
        $("#sql-table").load(" #sql-table > *");
    });
    
});

表单与 ajax 完美结合，无需刷新即可提交到数据库。但我也想在不重新加载的情况下更新我页面上的表格。

$("#sql-table").load(" #sql-table > *");

这是我尝试过的。我把它放在了成功函数和提交函数中，但都不起作用。

【问题讨论】：

您必须向tables.php 发出ajax 请求以刷新#sql-table。所以它应该是$("#sql-table").load("tables.php");（.load() 是 ajax 的简写）。
PHP 包含只发生一次，当页面第一次从服务器获取时，该代码就消失了。您无法从浏览器再次调用它。您必须在 JS 中重建表，或者在 PHP 中生成它并使用 ajax 调用它..
@LouysPatriceBessette 谢谢你，那行得通。从来不知道解决方案这么简单！
按原样，$("#sql-table").load(" #sql-table > *"); 正在尝试向 url /%20#sql-table%20%3E%20* 发出 ajax 请求，但显然失败了。

标签： javascript php html jquery ajax

【解决方案1】：

您误用了$.load()。这是$.ajax() 的简写。第一个参数必须是 URL。可选参数是data 和options。

您正在向它传递一个选择器，因此请求失败。照原样，$("#sql-table").load(" #sql-table > *"); 正在尝试对 URL /%20#sql-table%20%3E%20* 的 AJAX 请求。 (!)

只需更改要执行的 PHP 文件的选择器：

$("#sql-table").load("tables.php");

【讨论】：

感谢@kmoser 的编辑，感谢 ;)

【解决方案2】：

每次输入发生更改时，强制redeem.php 重新评估 PHP div 怎么样？

        <h1>Rewards</h1>
        <script>
            function redrawSQLTable(){
                document.getElementById('sql-table').innerHTML = "<?php include 'tables.php'; ?>"
            }
        </script>
        <form id="add-reward-form" action="" method="POST">
                <label for="inputRewardDescription" class="form-label">Enter Reward Description</label>
                <input type="text" id=inputRewardDescription name="description" class="form-control" required onchange="redrawSQLTable()">
                
                <label for="inputRewardCost" class="form-label">Enter Reward Cost</label>
                <input type="text" id=inputRewardCost name="points" class="form-control" required onchange="redrawSQLTable()">
    
                <button type="submit" class="btn btn-success" id="submit-btn">Save</button>
        </form>  
        <p id="message"></p>
        <div id="sql-table">
            <?php include 'tables.php'; ?>
        </div>

【讨论】：