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

时间:2016-04-15 04:57:13

标签: javascript php jquery ajax

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

这是我的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
  });
});

我的kobegreat.php文件:

<?php

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

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>

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

1 个答案:

答案 0 :(得分:2)

如果我理解正确,那么您只需尝试将所选单选按钮的名称传递给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

<?php

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

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

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