我正在写一个Shoutbox。 HTML 文件有 2 个按钮:刷新 - 刷新所有消息和提交 - 提交消息并刷新页面消息。
一切正常，但有一个问题。当我单击“提交”时，页面不会刷新最新消息。但之后一切正常。
HMTL 文件:
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div id="wrap">
<div id="input">
<form>
<input type="text" name="name" id="name" placeholder="Enter a name">
<input type="text" name="message" id="message" placeholder="Enter a message">
<input type="button" id="refresh" value="Refresh">
<input type="button" id="submit" value="Submit">
</form>
</div>
<div id="messages">
<ul id="messageList"></ul>
</div>
</div>
</body>
</html>
JavaScript 文件
$(document).ready(function() {
$('#refresh').on('click', function(){
$("#messageList").load( "messages.php");
event.preventDefault();
});
});
$(document).ready(function() {
$('#submit').on('click', function(){
var name = $("#name").val();
var message = $("#message").val();
var dataString = 'name='+ name + '&message='+ message;
$.post( "newmessage.php", dataString );
event.preventDefault();
$("#messageList").load( "messages.php");
event.preventDefault();
});
});
messages.php:
<?php
//error_reporting(0);
include 'database.php';
//Create Select Query
$query = "SELECT * FROM shoutbox ORDER BY time DESC";
$shouts = mysqli_query($con, $query);
while($row = $shouts->fetch_object()) {
$time = $row->time;
$name = $row->name;
$message = $row->message;
echo "<li>".$time." - <b>".$name.": </b>".$message."</li>";
}
$con->close();
?>
newmessage.php:
<?php
//error_reporting(0);
include 'database.php';
if(isset($_POST['name']) && isset($_POST['message']))
{
$name = '"'.$_POST['name'].'"';
$message = '"'.$_POST['message'].'"';
$datum = new DateTime();
$timeStamp = $datum->format('Y-m-d H:i:s');
$insert_row = $con->query("INSERT INTO shoutbox(name, message) VALUES($name, $message)");
}
if($insert_row) {
} else {
die('Error : ('. $con->errno .') '. $con->error);
}
$con->close();
?>
最佳答案
来自this answer :
I'd recommend strongly that you take the time to understand the nature of asynchronous calls within JavaScript
请点击链接，那里有更多信息。
让您的代码正常工作:
$(document).ready(function() {
$('#submit').on('click', function(event){ // << event was missing
var name = $("#name").val();
var message = $("#message").val();
var dataString = 'name='+ name + '&message='+ message;
event.preventDefault();
$.post("newmessage.php", dataString, function(){
// this function is a callback, called on AJAX success
$("#messageList").load( "messages.php");
});
});
});
关于javascript - 已发布使用 JavaScript 将 PHP 数据加载到 HTML 文件的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30130050/