我是新手，到目前为止我只是使用html表单，单击提交按钮，页面正在刷新，数据已提交到服务器(mySQL(。但我学到了Ajax(Ajax是开发人员的梦想(，他们说因为你可以：
从web服务器读取数据-页面加载后
在不重新加载页面的情况下更新网页
将数据发送到web服务器-在后台
所以我做了一个简单的例子假设我已经设置了sqlConnection.php
let input = document.getElementById("inputField");
document.getElementById("submitBtn").addEventListener("click", function (){
if(input.value == ""){
alert("empty field");
}else {
$(document).ready(function (){
$.ajax({
url: 'insert.php',
method: 'POST',
dataType: 'text',
data: { comment: input.value },
success: function (){
input.value = "";
}
});
});
}
});
function selectQuestions(){
let data = "true";
$("#comments").load("select.php");
}
setInterval(selectQuestions, 3000);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax text</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container py-3">
<input id="inputField" type="text" class="form-control text-left" aria-label="">
<div class="py-2 my-1">
<button id="submitBtn" value="addNew" class="btn btn-success">Submit</button>
</div>
</div>
<div class="container" id="comments">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>select.php具有以下特性：
$sql = "SELECT * FROM data";
$result = $conn->query($sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<p>{$row['question']}</p>";
}
} else {
echo "No comments";
}
所以我的问题：为了查看来自服务器的新结果，这是否正确？如您所见，我每3秒钟调用一次setInterval方法。这对服务器不好吗？例如，如果我把这个项目上传到一个服务器上，10个用户正在使用它。我是不是耗尽了服务器——消耗了更多的空间？
假设您的代码在main.js中，则不需要$(document).ready()，因为在<body>的底部，您的代码只有在一切就绪后才能运行。更不用说它放错地方了。
起初，我认为您使用.load()是错误的，因为它是事件处理程序.on('load')的简写。但事实证明，在jquery 3.0中，他们添加了一个也称为.load()的ajax方法。这很愚蠢，会引起很多混乱，但我离题了，使用$.get((或$.getJson从服务器获取东西。
每隔一段时间访问服务器并不一定很糟糕，这被称为轮询，多年来互联网就是这样进行全双工通信的。当您过于频繁地进行轮询，或者想要更新太多数据，或者有太多用户同时进行轮询时，就会出现问题。多少就是多少取决于服务器运行的机器。Websockets绝对是一个更好的选择，但配置起来要复杂得多。
我冒昧地重写了一些内容，因为如果您使用的是jquery，还不如使用jquery。
let $input = $('#inputField');
$('#submitBtn').on('click', function(e) {
e.preventDefault(); //assuming this is in a <form>, default action is to reload the page
if ($input.val()) {
$.post('insert.php', { comment: $input.val() })
.done(function() {
$input.val('');
})
.fail(function(error) {
//error handling code
});
} else {
alert("empty field"); //alerts are annoying and thread blocking,
} //maybe use a different method to communicate with the user.
});
setInterval(function() {
$.get('select.php')
.done(function(select) {
//whatever you want to do with the response from this
})
.fail(function(error) {
//error handeling code
});
}, 3000);
在php方面，也许只是稍微清理一下，这样它就更可读了。您可以使用->fetch_all(MYSQLI_ASSOC)方法而不是while循环来获取结果的关联数组。然后只需array_map((和内爆((来构建html响应。
<?php
$conn = new mysqli("configs and what not");
$statement = $conn->query("SELECT * FROM data");
$result = $statement->fetch_all(MYSQLI_ASSOC);
if (count($result) > 0) {
echo implode("", array_map(fn($row) => "<p>{$row["question"]}</p>", $result));
} else {
echo "No comments";
}
$conn->close();