【发布时间】：2019-08-14 07:06:14
【问题描述】：
我有 2 个表单，每个表单都有一个 JS 脚本，其中一个在单击提交按钮后加载一些 cmets，另一个脚本提交评论。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<?php
$conn = mysqli_connect('dbserver', 'dbuser', 'dbpw', 'dbname') or die("Connection failed: " . mysqli_connect_error());
$conn->query("SET NAMES 'utf8'");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$sql = "SELECT * FROM table_name ORDER BY date ASC";
$rs_result = mysqli_query($conn, $sql);
//the following part will echo multiple individual forms, depending on the table content.
while ($row = mysqli_fetch_assoc($rs_result)) {
echo '
<form action="load_comments.php" method="POST" id="form_' . $row["id"] . '" class="load_comments_form">
<div id="result_comments_form_' . $row["id"] . '">
<!--load all comments here-->
</div>
<input type="hidden" name="identifier" value="' . $row["identifier"] . '">
<input type="hidden" name="translation_language" value="' . $row["language"] . '">
<input type="submit" name="" value="Load / refresh comments" class="load-comments">
</form>
<form action="save_comment.php" method="POST" id="save_comment_form_' . $row["id"] . '" class="comment_form">
<textarea rows="4" name="comment_content" class="textarea-comment"></textarea>
<input type="hidden" name="username" value="' . $row["username"] . '">
<input type="hidden" name="identifier" value="' . $row["identifier"] . '">
<input type="hidden" name="translation_language" value="' . $row["language"] . '">
<input type="submit" name="" value="Send" class="submit-comment">
</form>
';
}
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Script 1: Load all comments-->
<script>
$(document).ready(function() {
$(".form").submit(function() {
// Getting the form ID
var formID = $(this).attr('id');
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'load_comments.php',
data: formDetails.serialize(),
success: function (data) {
// Inserting html into the result div
$('#result_comments_'+formID).html(data);
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
$('#result_comments_'+formID).html(error);
}
});
return false;
});
});
</script>
<!--Script 2: Save comment-->
<script>
$(document).ready(function() {
$(".save_comment_form").submit(function() {
$('<div class="changes-saved_comment">✓ Comment sent.<br>Admin has been notified.</div>').insertAfter(this).fadeOut(6000);
// Getting the form ID
var formID = $(this).attr('id');
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'save_comment.php',
data: formDetails.serialize(),
success: function (data) {
// Inserting html into the result div
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
}
});
$('.textarea-comment').val(''); //clean textarea
return false;
});
});
</script>
</body>
</html>
这是当前状态的快速演示视频：
正如在视频中看到的，我必须单击第一个表单/脚本的提交按钮才能加载 cmets。虽然，提交按钮应该保留在那里以便按需触发，但它也应该在页面加载时触发一次。
第二个脚本提交了一条新评论。 从视频中可以看出，提交后cmets不会自动刷新。 所以我需要第二个脚本，一旦成功，触发第一个表单/脚本的提交。
请记住，每个页面有多个表单，这些表单是使用 row["id"] 动态创建的，我在 formDetails.serialize() 的帮助下将动态创建的参数传递给两个 .php 文件。
谢谢。
【问题讨论】：
-
如果我知道您想在保存新评论后重新加载所有 cmets？
-
是的，没错。
标签： php jquery ajax parameter-passing submit