在html文件中重新运行php脚本而不重新加载页面

bfhwhh0e  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(240)

我想重新运行一个php文件,该文件在html代码中加载到一个div中。在我的主页上,我有一个表格和一个表格。表单向mysql表中添加行,页面上的表输出该mysql表。我希望html页面上的表在通过表单添加新行时更新,而不刷新页面。我尝试将load命令放在表单的ajax函数的success部分,但没有成功。我看了很多其他的答案,没有一个对我有用。
这是我的密码
repaime.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>";
    ?>

赎回-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 > *");

这就是我试过的。我把它放在success函数和submit函数中,但两者都不起作用。

pn9klfpd

pn9klfpd1#

你用错了 $.load() . 这是英语的简写 $.ajax() . 第一个参数必须是url。可选参数为 dataoptions .
您正在向其传递选择器,因此请求失败。事实上, $("#sql-table").load(" #sql-table > *"); 正在尝试向url发送ajax请求 /%20#sql-table%20%3E%20* . (!)
只需更改要执行的php文件的选择器:

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

voj3qocg2#

强迫怎么样 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>

相关问题