Реализуйте Ajax для загрузки HTML в зависимости от значения переключателя

Question

Здравствуйте, я действительно новичок в AJAX PHP и JQuery, поэтому любое предложение действительно связано.
У меня есть страница HTML с формой, в этой форме у меня есть 3 переключателя с 3 ценности. Моя цель состоит в том, чтобы напечатать некоторые значения HTML с этими значениями.

Например, если я выберу переключатель 2 (значение = 2), чтобы ->

echo <input type="text">
echo <input type="text">

Мне удалось выведите значение в пустом элементе div под кнопками, но я не знаю, как сгенерировать код с помощью переменной $ _POST (я пытался добавить страницу действия, но она не работала)

HTML:

<div class="hide">
  <input type="radio" name="cat_2" value="1">One
  <input type="radio" name="cat_2" value="2">Two
  <input type="radio" name="cat_2" value="3">Three
</div>
<div id="response"></div>
<?php include 'gen.php'; ?> //my failed test

JQuery:

    <script>
        $(document).ready(function () {
            $('.hide input[type="radio"]').click(function(){
                var value= $(this).val();
                $.ajax({
                    url: "ajax_page.php",
                    type: 'post',
                    data: {ajax: 1, value: value},
                    success: function (response) {
                    $('#response').text(value);
                    }
                });
            });
        });
    </script>

ajax_page. php просто для проверки значения:

<?php

if ($_SERVER['REQUEST_METHOD'] == "POST") {
    echo $_POST['value'];
} else {
    echo "Nothing to Show";
}
?>

Я не знаю, был ли я достаточно ясно, любая идея была бы действительно полезна, я даже не знаю, что искать :)

Answer 1

gen.php запускается перед отправкой веб-страницы в браузер. Вы не сможете получить доступ к каким-либо возвращаемым переменным или информации из вызова ajax, потому что код gen.php уже будет запущен. gen.php потребуется иметь всю информацию ДО того, как он запустится / браузер загрузит страницу. Если вам нужен код для запуска ПОСЛЕ того, как браузер загрузит страницу, вы должны сделать это на вашей ajax_page.php.

Просто подсказка для вашей ajax_page. Вы должны избегать непосредственного использования суперпеременных и сначала фильтровать ввод (чтобы предотвратить злонамеренные или случайные проблемы). Примерно так:

   if($value = filter_input(INPUT_POST, "value", FILTER_VALIDATE_INT)){
        echo $value;
    } else {
        echo "Nothing to Show";
    }

Вы должны также зафиксировать ошибку из вызова ajax и записать ее на консоль (или представить ее пользователю). Вот как вы можете войти в консоль.

$(document).ready(function () {
    $('.hide input[type="radio"]').click(function(){
        var value= $(this).val();
        $.ajax({
            url: "ajax_page.php",
            type: 'post',
            data: {ajax: 1, value: value},
            success: function (response) {

                // Loop to output repeated HTML
                var output = "";
                for (i = 0; i < response; i++) {
                    // Put the HTML in here for example you could create the output:
                    output = output + "<p>test</p>";
                }
                // and then display it
                $('#response').html(output);
            },
            error: function (response){
               console.log(response)
            }
        });
    });
});