php - 同时更新数据库和页面内容

Question

这对我来说是一个艰难的过程。这个过程总共涉及五个文件。我不禁觉得我把这个问题复杂化了。我之前问过这个问题并且认为我理解这个问题，但后来我试图向方程式添加一个简单的“加载”模式，但它坏了。更糟糕的是，我再也不能让它工作了。我改变了太多。 是的，我知道我应该备份它，让我们过去吧。在这整个元素中我根本无法更改的一种语言是我的数据库语言，即 MySql。

---

我想要发生的事情

页面加载所有未归档的提交。数据是结构化的，以便为每一行显示一些但不是全部数据。至少在用户单击“更多信息”按钮之前不会。 注意:这不是问题，只是这里的问题，因为我还没有构建它，我稍后会关注它。

用户使用完一行中的数据后，我希望用户能够通过将“已归档”字段从 0 更改为 1 来将数据归档到数据库中。完成后，我希望该行消失。如果出现延迟并且需要一两秒以上才能完成此操作，则应出现一个加载模式，表明该页面已收到请求并阻止用户多次按下“存档”按钮。

---

现在发生了什么

当页面加载时，所有非存档数据都显示在行中，这些行显示表格中每条记录的部分但不是全部信息。当用户单击“更多信息”按钮时，什么也没有发生。 注意:同样，我不关注这个问题，我知道如何解决这个问题。当用户点击“存档”按钮时，它什么都不做，但如果他们点击多次，它最终会带来向上“加载”模式，然后刷新页面。应该消失的行仍然存在，记录仍然显示“0”而不是应有的“1”。

---

给出代码前的最后评论

我对使用其他语言持开放态度，因为我学得很快，只是不知道如何整合它们。但是，如果您确实做出回应，请同时解释为什么我的方法较差，以及我必须做些什么才能使这项工作成功。我仍在学习 AJAX(非常初学者)和 PHP(中级......我认为)。

代码

index.php - 删节 headless

<div class="container">
    <h1><span class="hidden">Locate My Pet</span></h1>
    <h2>Administration</h2>
    <p class="lead alert alert-info">Hello There! You can review and archive submitted requests here.</p>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h2 class="text-center">Submissions</h2>
        </div><!--/.panel-heading-->
        <div id="results"></div><!--To be populated by script-->
    </div><!--/.panel .panel-default-->
</div><!-- /.container -->
<footer class="footer">
    <div class="container">
    <p class="text-muted text-center">&copy; 2016 TL Web Development and Design</p>
    </div><!--/.container-->
</footer><!--/.footer-->
<div class="modal fade" id="archiveMessage" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Archiving Submission</h4>
            </div><!--/.modal-header-->
            <div class="modal-body">
                <p>Please wait . . .</p>
            </div><!--/.modal-body-->
        </div><!--/.modal-content-->
    </div><!--/.modal-dialog-->
</div><!--/.modal-->

提交.php

<table class="table table-responsive table-striped">
<tr>
    <th>Customer Name</th>
    <th>Address</th>
    <th>Contact</th>
    <th>Pet Info</th>
    <th>Tools</th>
</tr>
<?php
    require "../_php/connect.php";

    $get_all = "SELECT request_id, fName, lName, address, city, state, zip, pPhone, cPhone, email, pName, gender, spayedNeutered, howLost, comments, timeEntered, archived FROM requests";
    $result = $conn->query($get_all);

    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            if (!$row['archived']) {
                echo "<tr id='" . $row['request_id'] . "' class='fade in'>
                        <td>
                            " . $row['fName'] . " " . $row['lName'] . "</br>
                            <strong>Sent: </strong>" . $row['timeEntered'] . "
                        </td>
                        <td>" . $row['address'] . "</br>" . $row['city'] . " " . $row['state'] . ", " . $row['zip'] ."</td>
                        <td>
                            <strong>Primary Phone:</strong> <a href='tel:" . $row['pPhone'] . "'>" . $row['pPhone'] ."</a></br>
                            <strong>Cell Phone:</strong> <a href='tel:" . $row['cPhone'] . "'> " . $row['cPhone'] . "</a></br>
                            <strong>Email:</strong> <a href='mailto:" . $row['email'] . "'>" . $row['email'] . "</a></td>
                        <td>
                            <strong>Pet Name:</strong> " . $row['pName'] . "</br>
                            <strong>Gender:</strong> " . $row['gender'] . "</br>
                            <strong>Spayed or Neutered?:</strong> ";
                if ($row['spayedNeutered'] = 0) {
                    echo "No</td>";
                } else {
                    echo "Yes</td>";
                }
                echo    "<td>
                            <button class='btn btn-info'>More info</button></br>
                            <form action='../_php/archive.php' method='get'><input type='hidden' value='" . $row['request_id'] . "' id='row_id'><button type='submit' class='btn btn-warning archive'>Archive</button></form>
                        </td>
                    </tr>";
            }
        }
    } else if ($conn->connect_error != NULL) {
        echo "<tr><td colspan='5'><div class='alert alert-danger' role='alert'>Error: " . $conn->error . "</div></td></tr>";
    } else {
        echo "<tr><td colspan='5'><div class='alert alert-info' role='alert'>No Records were found.</div></td></tr>";   
    }
?>
<script type="text/javascript" src="../_js/query.js"></script>
</table>

connect.php - 出于安全原因未包含某些内容

// Create connection
$conn = new mysqli($servername, $username, $password, $dbName);

// Check connection
if ($conn->connect_error) {
    die("<tr><td colspan='5'><div class='alert alert-danger' role='alert'>Error: " . $conn->error . "</div></td></tr>)");
}

查询.js

$(document).ready(function() {
    "use strict";
    $('#results').load('../_php/submission.php');
    $(".archive").click(function() {
        $('#archiveMessage').modal('show');
        var id = $(this).parent().parent().attr('id');
        $.ajax({
            type: 'POST',
            url: '../_php/functions.php',
            data: {'archive': id},
        });
    });
});

函数.php

<?php

require "connect.php"; // Connect to database       

    function archive($id) {
        require "connect.php";
        $archive = "UPDATE requests SET archived='1' WHERE request_id='$id'";
        if ($conn->query($archive) === TRUE) {
            echo "Record " . $id . " has been archived.";
        } else {
            echo "Error: " . $conn->error;
        }
    }


    if (isset($_POST['callArchive'])) {
        archive($_POST['callArchive']); 
    } else {
        archive(1);
    }
?>

Answer 1

由于存档按钮是动态加载的，因此最好选择使用 .on('click') 而不是 .click()，它不会在动态加载的元素上触发。 Try to read the question and answeres here, specially the selected correct answer.

query.js

$(document).ready(function() {
    "use strict";
    $('#results').load('../_php/submission.php');
    $("#results .archive").on("click",function() {
        $('#archiveMessage').modal('show');
        var id = $(this).parent().parent().attr('id');
        $.ajax({
            type: 'POST',
            url: '../_php/functions.php',
            data: {'archive': id},
            //If you dont want to change your functions.php file use the commented line below instead of the above code
            //data: {'callArchive':id},
        });
    });
});

When the user clicks on the "archive" button, it does nothing, but if they click if multiple times it eventually will bring up the "loading" modal and then refresh the page. The row that should have disappeared is still there, and the record still shows a "0" instead of a "1" as it should.

由于您的 ajax 调用数据包含 post 'archive'，其中值为 id 并且您想更新请求表的一些数据，但您正在检查
的错误索引POST 数据(if (isset($_POST['callArchive'])) )
而是将其更改为 if (isset($_POST['callArchive']))

<?php   
    function archive($id) {
        require "connect.php";// Connect to database    
        $archive = "UPDATE requests SET archived='1' WHERE request_id='$id'";
        if ($conn->query($archive) === TRUE) {
            echo "Record " . $id . " has been archived.";
        } else {
            echo "Error: " . $conn->error;
        }
    }


    if (isset($_POST['archive'])) {
        archive($_POST['archive']); 
    } else {
        archive(1);
    }
?>

希望对你有帮助:D