实现 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 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.phpgen.phpajax_page.php只是给你ajax_page一个提示。您应该避免直接使用超变量，并首先过滤输入（以防止恶意或意外问题）。像这样：&nbsp; &nbsp;if($value = filter_input(INPUT_POST, "value", FILTER_VALIDATE_INT)){&nbsp; &nbsp; &nbsp; &nbsp; echo $value;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; echo "Nothing to Show";&nbsp; &nbsp; }您还应该从 ajax 调用中捕获错误，并将其记录到控制台（或将其呈现给用户）。以下是将其记录到控制台的方法。$(document).ready(function () {&nbsp; &nbsp; $('.hide input[type="radio"]').click(function(){&nbsp; &nbsp; &nbsp; &nbsp; var value= $(this).val();&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "ajax_page.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'post',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {ajax: 1, value: value},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Loop to output repeated HTML&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var output = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < response; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Put the HTML in here for example you could create the output:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; output = output + "<p>test</p>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // and then display it&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#response').html(output);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function (response){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(response)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });});