这是正确使用 ajax 和 php - mysql - javascript 吗？
Posted
技术标签:
【中文标题】这是正确使用 ajax 和 php - mysql - javascript 吗？【英文标题】：Is this the proper use of ajax, with php - mysql - javascript? 【发布时间】：2021-08-12 20:21:57 【问题描述】：我是新手，到目前为止我只是使用 html 表单，单击提交按钮，页面正在刷新并且数据已发送到服务器（mysql）。但是我学习了 Ajax（AJAX 是开发人员的梦想），他们说因为你可以：
从网络服务器读取数据 - 页面加载后
更新网页而不重新加载页面
将数据发送到网络服务器 - 在后台
所以我做了一个简单的例子。 假设我已经设置了 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 个用户正在使用它。我是否会耗尽服务器 - 消耗更多空间？
【问题讨论】：
Is this bad for the server...是的，可能。它可能会使用大量内存、CPU 和互联网带宽。如果同时有太多用户这样做，可能会导致服务器崩溃。您可以在对 insert.php 的调用完成后让它调用 select.php 一次。取决于你是否希望能够在不刷新页面的情况下看到其他人的插入？
data 表有多大？每隔几秒钟下载整个表格可能会很昂贵。
@Kinglish 这将数据库查询排除在外，这可能是所有步骤中最优化的，它不会改善带宽泛滥或服务器请求/cpu 等
@Kinglish 更好，获取 AJAX 调用来读取文件，因此无需查找/运行 PHP 脚本
例如，一个竞争对手可以支付一个相当小的僵尸网络来完全瘫痪你的网站
【参考方案1】：
假设您的代码在main.js 中，则不需要$(document).ready()，因为在<body> 的底部，您的代码只会在一切准备就绪后运行。更不用说它在错误的地方。
起初我以为你用错了.load()，因为它是event handler .on('load') 的简写。但事实证明，在 jquery 3.0 中，他们添加了一个ajax method，也称为.load()。这很愚蠢，会引起很多混乱，但我离题了，使用 $.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) method 而不是 while 循环来获取结果的关联数组。然后只需 array_map() 和 implode() 即可构建您的 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();
【讨论】：
以上是关于这是正确使用 ajax 和 php - mysql - javascript 吗？的主要内容，如果未能解决你的问题，请参考以下文章
使用 AJAX 和 PHP 将 MYSQL 中的数据显示到文本字段中
这是为了防止使用 PHP 和 Ajax 的 CSRF 所需要做的吗？