如何使用 Javascript 和 Ajax 将 HTML 单选按钮值传递给 PHP 变量？
Posted
技术标签:
【中文标题】如何使用 Javascript 和 Ajax 将 HTML 单选按钮值传递给 PHP 变量？【英文标题】：How do I pass HTML radio button value to a PHP variable using Javascript and Ajax? 【发布时间】：2013-01-21 01:04:48 【问题描述】：我正在尝试使用 Jquery/javascript 和 Ajax 将用户选中的 html 单选按钮值传递给 php 变量。
以下是HTML/Javascript的简化版（没有错误检查等）
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
</head>
<body>
<input type="radio" name="bus_plan" id="smallBtn" value="1"/>
<input type="radio" name="bus_plan" id="smallBtn" value="2"/>
<script type="text/javascript">
$(document).ready(function()
$("input[name=bus_plan]").on('change', function()
var $postID = $('input:radio[name=bus_plan]:checked').val();
$postID = "="+$postID;
);
$.ajax (
type: "GET",
url: "localhost/ajax/product-group.php",
data: "postID" : $postID
);
);
</script>
</body>
</html>
以下是简化版的PHP程序（localhost/ajax/product-group.php）：
<?php
$postid = $_GET['postID'];
echo "The PostID is ".$postid;
?>
这是在 MAMP 堆栈上运行的。
Javascript 一直工作到 $.ajax 调用，然后 PHP 程序 (localhost/ajax/product-group.php) 永远不会“调用”。
任何建议或帮助将不胜感激。
谢谢。
【问题讨论】：
【参考方案1】：替换：
$("input[name=bus_plan]").on('change', function()
var $postID = $('input:radio[name=bus_plan]:checked').val();
$postID = "="+$postID;
);
$.ajax (
type: "GET",
url: "localhost/ajax/product-group.php",
data: "postID" : $postID
);
与：
$("input[name=bus_plan]").on('change', function()
var $postID = $('input:radio[name=bus_plan]:checked').val();
$postID = "="+$postID;
$.ajax (
type: "GET",
url: "localhost/ajax/product-group.php",
data: "postID" : $postID
);
);
或使用您的代码通过在选项中添加 async = false 来制作 ajax async
使用您的代码，您不知道在单选按钮更改之前或之后何时调用 ajax，因为它的 asynchronous，添加 async=false 作为 ajax 选项，您将确保它会同步执行
【讨论】：
【参考方案2】：在正确缩进代码之前，您无法真正看到问题：
$("input[name=bus_plan]").on('change', function()
var $postID = $('input:radio[name=bus_plan]:checked').val();
$postID = "="+$postID;
);
$.ajax (
type: "GET",
url: "localhost/ajax/product-group.php",
data: "postID" : $postID
);
几个问题：
-
您的
$postID 是更改处理程序的本地
$.ajax() 立即运行。
URL 缺少http:// 方案。
您也应该将 $.ajax() 调用移到内部，以便它仅在发生变化时运行：
$("input[name=bus_plan]").on('change', function()
var $postID = "=" + $('input:radio[name=bus_plan]:checked').val();
$.ajax (
type: "GET",
url: "http://localhost/ajax/product-group.php",
data: "postID" : $postID
);
);
【讨论】：
感谢 Jack 和 @GGio 的回复。通过添加移动 ajax 调用和添加 ajax 错误处理，ajax 可以正常工作。然而，被调用的 php 程序似乎不起作用，因为 echo 语句从不显示。 （他们在独立运行时这样做）。所以现在代码如下：以上是关于如何使用 Javascript 和 Ajax 将 HTML 单选按钮值传递给 PHP 变量？的主要内容，如果未能解决你的问题，请参考以下文章
使用 Javascript 和 AJAX 将用户重定向到最近和最快的 Web 服务器？
如何使用 JavaScript 和 AJAX 根据邮政编码自动填充城市和州？
如何在 Wordpress 中使用 Ajax 将 Javascript 对象传递给 PHP
如何使用 vanilla javascript 通过 ajax 将多张照片上传到 Laravel 应用程序？