使用 jQuery、PHP 和 MySQL 为单选按钮加载 JSON 数据
Posted
技术标签:
【中文标题】使用 jQuery、PHP 和 MySQL 为单选按钮加载 JSON 数据【英文标题】：Loading JSON data with jQuery, PHP and MySQL for radio buttons 【发布时间】：2011-11-07 04:10:20 【问题描述】：我正在尝试填充第三组单选按钮作为以下脚本的补充：http://www.electrictoolbox.com/json-data-jquery-php-radio-buttons/
由于某种原因，我似乎无法用相应的数据填充第三组。它只是保持空白:(
调用populateFruittype()函数只返回[ ]，而populateFruitVariety()正确返回json数据。
getdata.php（数据库连接/获取数据）
<?php
$dsn = "mysql:host=localhost;dbname=mydb";
$username = "username";
$password = "password";
$pdo = new PDO($dsn, $username, $password);
$rows = array();
if(isset($_GET['fruitName']))
$stmt = $pdo->prepare("SELECT DISTINCT variety FROM fruit WHERE name = ? ORDER BY variety");
$stmt->execute(array($_GET['fruitName']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
if(isset($_GET['fruitVariety'] ))
$stmt = $pdo->prepare("SELECT DISTINCT fruittype FROM fruit WHERE variety = ? ORDER BY fruittype");
$stmt->execute(array($_GET['fruitVariety']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($rows);
?>
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Toevoegen</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function populateFruitVariety()
var fruitName = $('input[name=fruitName]:checked').val();
$.getJSON('getdata.php', fruitName: fruitName, function(fruit)
var html = '';
$.each(fruit, function(index, array)
html = html + '<label><input type="radio" name="fruitVariety" value="' + array['variety'] + '" />' + array['variety'] + '</label> ';
);
$('#varieties').html(html);
);
function populateFruittype()
var fruitVariety = $('input[name=fruitVariety]:checked').val();
$.getJSON('getdata.php', fruitVariety: fruitVariety, function(fruit)
var html = '';
$.each(fruit, function(index, array)
html = html + '<label><input type="radio" name="fruitType" value="' + array['fruittype'] + '" />' + array['fruittype'] + '</label> ';
);
$('#fruittype').html(html);
);
$(function()
$('input[name=fruitName]').change(function()
populateFruitVariety();
);
);
$(function()
$('input[name=fruitVariety]').change(function()
populateFruittype();
);
);
</script>
</head>
<body>
<form>
<div>
<strong>Fruit:</strong>
<label><input type="radio" name="fruitName" value="Apple"/>Apple</label>
<label><input type="radio" name="fruitName" value="Banana"/>Banana</label>
<label><input type="radio" name="fruitName" value="Orange"/>Orange</label>
<label><input type="radio" name="fruitName" value="Pear"/>Pear</label>
</div>
<div>
<strong>Variety:</strong>
<span id="varieties"></span>
</div>
<div>
<strong>Type:</strong>
<span id="fruittype"></span>
</div>
</form>
</body>
</html>
数据库查询和内容可以在这里找到：http://www.electrictoolbox.com/mysql-example-table/
只需添加：
`fruittype` varchar(50) NOT NULL
并用一些自定义值填充它。
【问题讨论】：
【参考方案1】：1) 数据库更新日期
ALTER TABLE fruit ADD COLUMN `fruittype` varchar(50) NOT NULL;
UPDATE fruit SET fruittype = 'description' /* WHERE name = 'Apple'*/;
2) 代码更新
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Toevoegen</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
$('input[name=fruitName]').change(function()
var fruitName = $('input[name=fruitName]:checked').val();
$.getJSON('test.php', fruitName: fruitName, function(fruit)
var html = '';
$.each(fruit, function(index, array)
html = html + '<input type="radio" name="fruitVariety" value="' + array['variety'] + '" /><label>' + array['variety'] + '</label> ';
);
$('#varieties').html(html);
);
);
$('input[name=fruitVariety]').live('click', function()
var fruitVariety = $('input[name=fruitVariety]:checked').val();
$.getJSON('test.php', fruitVariety: fruitVariety, function(fruit)
var html = '';
$.each(fruit, function(index, array)
html = html + '<input type="radio" name="fruitType" value="' + array['fruittype'] + '" /><label>' + array['fruittype'] + '</label> ';
);
$('#fruittype').html(html);
);
);
);
</script>
</head>
<body>
<form>
<div>
<strong>Fruit:</strong>
<label><input type="radio" name="fruitName" value="Apple"/>Apple</label>
<label><input type="radio" name="fruitName" value="Banana"/>Banana</label>
<label><input type="radio" name="fruitName" value="Orange"/>Orange</label>
<label><input type="radio" name="fruitName" value="Pear"/>Pear</label>
</div>
<div>
<strong>Variety:</strong>
<span id="varieties"></span>
</div>
<div>
<strong>Type:</strong>
<span id="fruittype"></span>
</div>
</form>
</body>
</html>
【讨论】：
显然您必须使用正确的水果类型更新所有记录。在这里，我只是将相同的用于演示目的。以上是关于使用 jQuery、PHP 和 MySQL 为单选按钮加载 JSON 数据的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery，为单选按钮设置 onClick 事件侦听器的最佳方法是啥？