大家好。 我的代码工作得很好,但是问题是,当我更改输入字段的值时,它不会将新数据提交到服务器,而是将旧数据重新提交到服务器,这回显了。仅在刷新页面后才提交Nww输入。 Wihich击败了使用Ajax的最初目的。 请有人指出正确的方向。提前致谢。 这是我的代码。
<link rel="stylesheet" href="comment.css">
<div class="l-com" id="l-com">
<a class="clickComment" href="#">Leave a comment</a>
</div>
<div class="comment-container">
<p>
<input type="text" placeholder="Enter your name" id="name">
</p>
<p>
<input type="text" placeholder="Enter your email" id="email">
</p>
<p>
<textarea id="comment" placeholder="Write your comment" rows="7">
</textarea>
</p>
<p>
<button type="submit" id="submitBtn"
onclick="showComment();">Post</button>
</p>
</div>
<div id="comment-result">
</div>
JavaScript
var name = document.getElementById('name').value,
email = document.getElementById('email').value,
comment = document.getElementById('comment').value,
pageUrl = window.location.href,
lastFsl = pageUrl.lastIndexOf('/'),
partUrl = pageUrl.substring(lastFsl + 1),
addrDot = partUrl.indexOf('.'),
pageLocation = partUrl.substring(0, addrDot),
webpage = pageLocation.replace(/-/g, '_'),
leaveAcomm = document.querySelector('.clickComment'),
commentWrapper = document.querySelector('.comment-container'),
submitBtn = document.getElementById('submitBtn'),
request = new XMLHttpRequest(),
parameters = 'name=' + encodeURIComponent(name) +
'&email=' + encodeURIComponent(email) +
'&comment=' + encodeURIComponent(comment) +
'&webpage=' + encodeURIComponent(webpage);
leaveAcomm.addEventListener('click', ChangeDisplay);
function ChangeDisplay() {
elDisplay = commentWrapper.style.display;
if(elDisplay === 'block') {
commentWrapper.style.display = 'none';
}else {
commentWrapper.style.display = 'block';
}
}
function showComment() {
request.open('POST','comment.handler.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
request.onreadystatechange = function () {
if(request.readyState == 4 && request.status == 200) {
var commentResult = document.getElementById('comment-result');
commentResult.innerHTML = request.responseText;
console.log(request.responseText);
}
}
request.send(parameters);
}
//php code comment.handler.php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$comment = $_POST['comment'];
$table = $_POST['webpage'];
$date = time();
//connect to the database
$servername = 'localhost';
$username = 'root';
$password = '';
$db = 'commdb';
$conn = mysqli_connect($servername, $username,$password, $db);
if(!$conn) {
die('could not connect ' . mysqli_connect_error($conn));
}
$checkTable = "SELECT 1 FROM $table";
$chkTblRun = mysqli_query($conn, $checkTable);
if($chkTblRun !== FALSE) {
if(!empty($name) && !empty($comment) && !empty($email)){
$insertComment = "INSERT INTO $table(posterName, email, comment,
commentDate)
VALUES ('$name', '$email', '$comment', '$date')";
$insertComRun = mysqli_query($conn, $insertComment);
$selAll = "SELECT * FROM $table ORDER BY ID DESC";
$selAllRun = mysqli_query($conn, $selAll);
while($rows = mysqli_fetch_assoc($selAllRun)) {
$name_field = $rows['posterName'];
$comment_field = $rows['comment'];
$postDate = $rows['commentDate'];
echo '<section id="commResults">' . '<div id="postName">' .
$name_field .
'</div>'. '<div id="commenter">' . $comment_field . '</div>' .
'</section>';
}
}
} else {
$createTable = "CREATE TABLE $table (" .
"ID INT NOT NULL AUTO_INCREMENT," .
"posterName VARCHAR (50) NOT NULL," .
"email VARCHAR (50) NOT NULL," .
"comment TEXT NOT NULL," .
"commentDate TEXT NOT NULL," .
"PRIMARY KEY (ID)" .
")";
$crtTblRn = mysqli_query($conn, $createTable);
if(!$createTable) {
echo 'could not create table ' . mysqli_error($conn);
} else {
if(!empty($name) && !empty($comment) && !empty($email)) {
$insertComm = "INSERT INTO $table (posterName, email, comment,
commentDate)
VALUES('$name', '$email', '$comment', '$date')";
$insertComRun = mysqli_query($conn, $insertComm);
$selAll = "SELECT * FROM $table ORDER BY ID DESC";
$selAllRun = mysqli_query($conn, $selAll);
while ($rows = mysqli_fetch_assoc($selAllRun)) {
$name_field = $rows['posterName'];
$comment_field = $rows['comment'];
$postDate = $rows['commentDate'];
echo '<section id="commResults">' . '<div id="postName">' .
$name_field .
'</div>' . '<div id="commenter">' . $comment_field .
'</div>' .
'</section>';
}
}
}
}
?>