无法使用AJAX和PHP显示单选按钮值

I'm having trouble displaying the value of a radio button that I click in my basic web app that I am currently working on.

我无法显示我在我目前正在处理的基本网络应用程序中单击的单选按钮的值。

Here is my ajax.js file:

这是我的ajax.js文件：

$('#selection').change(function() {
    var selected_value = $("input[name='kobegreat']:checked").val();

   $.ajax( {
       url: "kobegreat.php",
       data: selected_value,
       type: "POST",
       datatype: "json",

       success: function(json) {
           var test1 = $("<p></p>").text(json["name"]);
           $("h3").append(test1);
           alert("AJAX was a success");
      },
      cache: false
  });
});

And my kobegreat.php file:

还有我的kobegreat.php文件：

<?php

   if($_SERVER['REQUEST_METHOD] == "POST") {
       $value = $POST['kobegreat'];
       $return = $_POST;
       if($return["name"] == "") {
           $return["name"] = $value;
       }
       echo json_encode($return);
   }
?>

HTML code I am trying to display my value on:

HTML代码我试图显示我的价值：

<h2>Select a Great Kobe Moment.</h2>
<form id="selection" method="get">
   <input type="radio" name="kobegreat" value="kobe1" checked/>Kobe1
   <input type="radio" name="kobegreat" value="kobe2"/>Kobe2
   <input type="radio" name="kobegreat" value="kobe3"/>Kobe3
</form>

<div id="target">
    <h3>Great Kobe Moment!</h3>
</div>

All I want is for the program to display the value underneath one of my headings I have on my webpage, but it won't do so. I get the alert that AJAX ran in the completed: section, but I am also getting an error in the log that says json is not defined. Look everywhere for help on this problem, thanks ahead of time for the help.

我想要的只是程序在我的网页上显示我的标题下面的值，但它不会这样做。我收到了AJAX在completed：部分中运行的警报，但我也在日志中收到错误，指出json未定义。到处寻找这个问题的帮助，提前感谢您的帮助。

1 个解决方案

#1

If i understand you correctly then you just try to pass the name of the selected radio button to your kobegreat.php file and return it back as response. Try this:

如果我理解正确，那么您只需尝试将所选单选按钮的名称传递给您的kobegreat.php文件并将其作为响应返回。尝试这个：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<h2>Select a Great Kobe Moment.</h2>
<form id="selection" method="get">
   <input type="radio" name="kobegreat" value="kobe1" checked/>Kobe1
   <input type="radio" name="kobegreat" value="kobe2"/>Kobe2
   <input type="radio" name="kobegreat" value="kobe3"/>Kobe3
</form>

<div id="target">
    <h3>Great Kobe Moment!</h3>
</div>

<script>
    $('#selection').change
    (
        function() 
        {
            var selected_value = $("input[name='kobegreat']:checked").val();

            $.ajax
            ( 
                {
                    url: "kobegreat.php",
                    dataType : "json",
                    method: "POST",
                    cache: false,
                    data: { selected_value : selected_value },

                    success: function(response)
                    {
                       var test1 = "<p>"+response+"</p>";
                       $("h3").append(test1);
                       alert("AJAX was a success");
                    }
                }
            );
        }
    );
</script>
</body>
</html>

kobegreat.php

kobegreat.php

<?php

   if($_SERVER['REQUEST_METHOD'] == 'POST')
   {
       $value = filter_input(INPUT_POST, "selected_value");

       if (isset($value))
       {
           echo json_encode($value);
       }
   }

Advice: You should never access the superglobal $_POST array directly, always use a filter function, because it is more secure.

建议：你永远不应该直接访问超全局$ _POST数组，总是使用过滤函数，因为它更安全。

#1