实现 Ajax 以根据单选按钮值加载 HTML

Question

你好，我对AJAX PHP和JQuery真的很陌生，所以任何建议都非常值得赞赏。我有一个带有表单的HTML页面，在此表单中，我有3个单选按钮和3个值。我的目标是在此值上打印一些HTML。例如，如果我选择单选按钮 2（值 = 2），则 -->echo <input type="text">echo <input type="text">我设法在按钮下的空div中打印值，但我不知道如何使用$ _POST变量生成代码（我试图排除操作页面，但它不起作用）网页：<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 testJQuery：    <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只是为了测试值：<?phpif ($_SERVER['REQUEST_METHOD'] == "POST") {    echo $_POST['value'];} else {    echo "Nothing to Show";}?>我不知道我是否足够清楚，任何想法都会很有帮助，我甚至不知道该搜索什么:)

Answer 1

gen.php在将网页发送到浏览器之前运行。您将无法访问 ajax 调用中的任何返回变量或信息，因为代码已经运行。 需要在运行/浏览器加载页面之前拥有所有信息。如果您需要在浏览器加载页面后运行代码，则必须在 .gen.phpgen.phpajax_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)

            }

        });

    });

});