借助 AJAX，如何通过请求 PHP 文件来更改文本值？（不刷新页面）答案

【问题标题】：How to change a text value by requesting a PHP file thanks to AJAX? (Without refreshing the page)借助 AJAX，如何通过请求 PHP 文件来更改文本值？（不刷新页面）
【发布时间】：2020-08-03 18:03:20
【问题描述】：

我正在学习 AJAX，并想创建一个非常简单的网络应用程序，以便在“现实世界”中使用我的知识。

我正在尝试计算用户输入值的不同百分比，并使其显示在网页上，无需刷新，这要归功于 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 的情况下使用它没有任何问题。

如果有人可以帮助我，我将非常感激。

【问题讨论】：

我认为你应该使用 jQuery。计算简单，无需涉及ajax，无需刷新页面即可使用jQuery完成。谢谢

标签： php ajax forms

【解决方案1】：

如上所述，为您发出 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);
        });
    });
});

【讨论】：

非常感谢，它有效！我现在要检查每一行代码，并确保我完全理解发生了什么。再次感谢！

【解决方案2】：

您可以简单地使用 Jquery 而不是使用 Ajax 来完成（使用 PHP，您应该在表单中添加 method="POST"）。这是一个例子：

$(document).ready(function(){
$("#send").click(function(){
// your calculates
$("#output").html(...);
});
});

...

<button type="submit" id="send">Calculate</button>

【讨论】：