JS
$(document).ready(function(){
$(':submit').on('click', function() { //当按钮被单击时触发单击事件
var button = $(this).val();
$.ajax({ //开始AJAX调用
url: 'test.php', //JQuery加载服务器端的PHP文件
data: 'button=' + $(this).val(), //发送按钮的酒类值
dataType: 'json', //选择JSON数据类型
success: function(data) //data变量包含了从服务器端返回的数据
{
$('#wines').html(''); //清除结果区域的div内容
if (button == 'all') { //当单击all按钮时,显示所有的酒类
for (var i in data.red) {
$('#wines').append('红酒: ' + data.red[i] + '<br/>');
}
for (var i in data.white) {
$('#wines').append('白酒: ' + data.white[i] + '<br/>');
}
}
else if (button == 'red') { //如果单击的是红酒按钮,则显示红酒
for (var i in data) {
$('#wines').append('红酒: ' + data[i] + '<br/>');
}
}
else if (button == 'white') { //如果单击的是白酒按钮,则显示白酒
for (var i in data) {
$('#wines').append('白酒: ' + data[i] + '<br/>');
}
}
}
});
return false; //使页面不会被刷新
});
});