这对我来说很难。这一过程共涉及五份文件。我忍不住觉得我把这个问题搞得太复杂了。我之前问过这个问题，我想我理解这个问题，但后来我试图在方程中添加一个简单的“加载”模式，结果它坏了。更糟糕的是我不能让它继续工作了。我改变太多了。是的，我知道我应该备份它，让我们过去。在整个元素中，有一种语言是我的DB语言，那就是MySql。
我想发生的事
页面加载所有未存档的提交。数据是结构化的，因此每行显示一些数据，但不是所有数据。至少在用户点击“更多信息”按钮之前。注意：这不是问题，但只是因为我还没有建立这个，我会集中在这个稍后。
用户使用完一行中的数据后，我希望用户能够通过将“archived”字段从0更改为1，将数据存档到数据库中。完成后，我希望这一行消失。如果存在延迟，并且需要超过一两秒钟来完成此操作，则应显示加载模式，该模式将指示页面已收到请求，并防止用户多次按下“存档”按钮。
现在发生了什么
加载页面时，所有未存档的数据将以行的形式显示，这些行显示表中每条记录的部分（而不是全部）信息。当用户点击“更多信息”按钮时，什么也不会发生。注：再次强调，我不关注这个问题，我知道如何解决这个问题。当用户点击“存档”按钮时，它什么也不做，但如果他们点击多次，它最终会弹出“加载”模式，然后刷新页面。应该消失的行仍然存在，记录仍然显示“0”，而不是应该显示的“1”。
给出代码前的最后注释
我对使用其他语言持开放态度，因为我学得很快，我只是不知道如何整合它们。但如果你真的这样回答，请解释为什么我的方式是低劣的，我会做什么，使这一工作。我仍然在学习AJAX（非常初级）和PHP（中级）。. . 我想）。
守则
index.php-无头节略
<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">© 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">×</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);
}
?>
最佳答案
因为archive按钮是动态加载的，所以最好使用.on（'click'）而不是.click（），它不会对动态加载的元素触发。Try to read the question and answeres here, specially the selected correct answer.
查询.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},
});
});
});
当用户点击“存档”按钮时，它什么也不做，但是如果
如果多次点击最终会出现“加载”
然后刷新页面。本该消失的争吵
仍然存在，记录仍然显示“0”而不是“1”
应该的。
由于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
关于php - 同时更新数据库和页面内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34604061/