Как изменить текстовое значение, запросив файл PHP благодаря AJAX? (Без обновления страницы) - PullRequest
Новая
       27

Как изменить текстовое значение, запросив файл PHP благодаря AJAX? (Без обновления страницы)

0 голосов
/ 03 августа 2020

Я изучаю 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 отображались в моем div "#output", когда пользователь нажимает кнопку отправки.

Я пробовал много разных вещей (AJAX без jQuery, AJAX с jQuery), но не смог получить то, что хочу.

Я конечно, я что-то делаю не так, но не знаю что. Я уверен, что мой сценарий PHP работает, так как я использовал его без AJAX без каких-либо проблем.

Я был бы очень благодарен, если бы кто-нибудь мог мне в этом помочь.

Ответы [ 2 ]

0 голосов
/ 03 августа 2020

Как упоминалось выше, самый простой способ сделать для вас запрос 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);
        });
    });
});
0 голосов
/ 03 августа 2020

Вы можете просто сделать это, используя Jquery вместо Ajax (используя PHP, вы должны добавить method = "POST" в форму). Вот пример: 

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

...

<button type="submit" id="send">Calculate</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...