我正在学习 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秒到达战场
TA贡献1828条经验 获得超6个赞
如上所述，发出 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);
});
});
});
万千封印
TA贡献1891条经验 获得超3个赞
您可以简单地使用 Jquery 而不是使用 Ajax 来完成此操作（使用 PHP，您应该将 method="POST" 添加到表单中）。这是一个例子：
$(document).ready(function(){
$("#send").click(function(){// your calculates$("#output").html(...);
});
});
...
<button type="submit" id="send">Calculate</button>- 2 回答
- 0 关注
- 93 浏览
添加回答
举报
0/150
提交
取消