如何通过 AJAX 请求 PHP 文件来更改文本值？
我正在学习 AJAX，并且想要创建一个非常简单的 Web 应用程序来在“现实世界”中使用我的知识。
我正在尝试计算用户输入值的不同百分比，并使其显示在网页上，而无需刷新，这要归功于 AJAX。
这是我的 HTML 表单：
<form id="warmupForm" class="form">
<label for="userWorkLoad">Work load (in kgs)</label><br>
<input type="text" name="userWorkLoad" id="userWorkLoad">
<button type="submit">Calculate</button>
</form>
<div id="#output">This is where I want the result to be shown with AJAX</div>
这是我的一些 PHP 代码，供您了解：
# Get the user input (work load in kgs)
if (isset($_POST['userWorkLoad'])) {
$workload = $_POST['userWorkLoad'];
# Avoid JS hacking
$workload = htmlspecialchars($workload);
}
# CALCULATION #
# Calculate 55% of the work load (1st warm up set)
$FirstWarmupSet = ($workload * 0.55);
# Calculate 70% of the work load (2nd warm up set)
$SecondWarmupSet = ($workload * 0.7);
# First Warmup set #
echo "<li>Do 8 reps with " . $FirstWarmupSet . " kgs, then take 1 minute rest.</li>";
echo "<br>";
# Second Warmup set #
echo "<li>Do 5 reps with " . $SecondWarmupSet . " kgs, then take 1 minute rest.</li>";
echo "<br>";
// etc etc...
我希望当用户单击提交按钮时，PHP 中的不同变量值显示在我的“#output”div 中。
我尝试了很多不同的东西（没有 jQuery 的 AJAX、带有 jQuery 的 AJAX），但没有得到我想要的。
我确信我做错了什么，但我不知道是什么。我确信我的 PHP 脚本可以正常工作，因为我在没有 AJAX 的情况下使用它，没有任何问题。
如果有人能在这方面帮助我，我将非常感激。
料青山看我应如是2回答
-
30秒到达战场
如上所述，发出 AJAX 请求的最简单方法可能是尝试 jQuery：<!doctype html><html> <head> <meta charset="utf-8"> <!-- Add jQuery on your HTML page --> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Add some custom JavaScript file --> <script type="text/javascript" src="script.js"></script> </head> <body> <form id="warmupForm" class="form"> <label for="userWorkLoad">Work load (in kgs)</label><br> <input type="text" name="userWorkLoad" id="userWorkLoad"> <button id="btn" type="submit">Calculate</button> </form> <div id="output">This is where I want the result to be shown with AJAX</div> </body></html>内容script.js：$(function() { // Process a button click $("#btn").click(function() { event.preventDefault(); // Get input field var userWorkLoadInput = $("#userWorkLoad"); // Build some request parameters var params = { userWorkLoad: userWorkLoadInput.val() }; // Let's name your PHP script file as "server.php" // And send POST request with those parameters $.post("server.php", params, function(response) { // Response text we're going to put into the `output` $("#output").html(response); }); });}); -
万千封印
您可以简单地使用 Jquery 而不是使用 Ajax 来完成此操作（使用 PHP，您应该将 method="POST" 添加到表单中）。这是一个例子：$(document).ready(function(){ $("#send").click(function(){// your calculates$("#output").html(...); }); }); ... <button type="submit" id="send">Calculate</button>
随时随地看视频慕课网APP
PHP