如何从mysql中获取结果,并在单击单选按钮时使用jquery进行显示
how to get result from mysql and display using jquery when radio button is clicked?
我想制定一个公交车座位计划。我有使用javascript函数的座位计划表。我从数据库中查询到两个名为Bus_1
和Bus_2
的单选按钮。当我点击其中一个单选按钮时,我想在座位表上显示可用的座位。问题是我不能写如何携带无线电值和在座位计划上显示数据库结果。请帮帮我。
<SCRIPT type="text/javascript">
$(function () {
var settings = { rowCssPrefix: 'row-', colCssPrefix: 'col-', seatWidth: 35, seatHeight: 35, seatCss: 'seat', selectedSeatCss: 'selectedSeat', selectingSeatCss: 'selectingSeat' };
var init = function (reservedSeat) {
var str = [], seatNo, className;
var shaSeat = [1,5,9,13,17,21,25,29,33,37,41,'@',2,6,10,14,18,22,26,30,34,38,42,'@','$','$','$','$','$','$','$','$','$','$',43,'@',3,7,11,15,19,23,27,31,35,39,44,'@',4,8,12,16,20,24,28,32,36,40,45];
var spr=0;
var spc=0;
for (i = 0; i<shaSeat.length; i++) {
if(shaSeat[i]=='@') {
spr++;
spc=0;
}
else if(shaSeat[i]=='$') {
spc++;
}
else {
seatNo = shaSeat[i];
className = settings.seatCss + ' ' + settings.rowCssPrefix + spr.toString() + ' ' + settings.colCssPrefix + spc.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) { className += ' ' + settings.selectedSeatCss; }
str.push('<li class="' + className + '"' +'style="top:' + (spr * settings.seatHeight).toString() + 'px;left:' + (spc * settings.seatWidth).toString() + 'px">' +'<a title="' + seatNo + '">' + seatNo + '</a>' +'</li>');
spc++;
}
}
$('#place').html(str.join(''));
}; //case I: Show from starting //init();
//Case II: If already booked
var bookedSeats = [2,3,4,5]; //**I don't know how to get query result in this array.This is problem for me **
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
// ---- kmh-----
var label = $('#busprice');
var sprice = label.attr('pi');
//---- kmh ----
// var sprice= $("form.ss pri");
if ($(this).hasClass(settings.selectedSeatCss)){ alert('This seat is already reserved'); }
else {
$(this).toggleClass(settings.selectingSeatCss);
//--- sha ---
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) { item = $(this).attr('title'); str.push(item); });
var selSeat = document.getElementById("selectedseat");
selSeat.value = str.join(',');
//var amount = document.getElementById("price");
// amount.value = sprice*str.length;
document.getElementById('price').innerHTML = sprice*str.length;
return true;
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () { // selected seat
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) { item = $(this).attr('title'); str.push(item); });
alert(str.join(','));
})
});
</SCRIPT>
您可以使用onclick
告诉AJAX获取您的信息,然后使用jQuery对其进行处理。
<input type="radio" name="radio" onclick="ajaxFunction()" />
function ajaxFunction()
{
$.ajax({
type: "POST",
url: "you_script_page.php",
data: "post_data=posted",
success: function(data) {
//YOUR JQUERY HERE
}
});
}
如果不传递任何变量,则不需要数据。
我使用jQuery的.load()函数获取外部php页面,并在页面上显示数据库的输出。
//In your jQuery on the main page (better example below):
$('#divtoloadinto').load('ajax.php?bus=1');
// in the ajax.php page
<?php
if($_GET['bus']==1){
// query database here
$sql = "SELECT * FROM bus_seats WHERE bus = 1";
$qry = mysql_query($sql);
while ($row = mysql_fetch_assoc($qry)) {
// output the results in a div with echo
echo $row['seat_name_field'].'<br />';
// NOTE: .load() takes this HTML and loads it into the other page's div.
}
}
然后,只需在每次单击每个单选按钮时创建一个像这样的jQuery调用。
$('#radio1').click(
if($('#radio1').is(':checked')){
$('#divtoloadinto').load('ajax.php?bus=1');
}
);
$('#radio2').click(
if($('#radio1').is(':checked')){
$('#divtoloadinto').load('ajax.php?bus=2');
}
);
相关文章:
- 是否可以禁用jquery中的单个单选按钮
- 当选择组中的单选按钮时,jQuery addClass
- Jquery-标识单选按钮值是否未更改
- 如何使用jQuery从DOM中删除所有单选按钮元素
- MVC和JQuery Mobile:单选按钮在发布时释放状态
- 单选按钮的验证(启用)&使用Jquery Optimization从复选框中选择submit按钮
- jQuery Validate不适用于自定义单选按钮
- Jquery-删除单选按钮
- 验证动态单选按钮jQuery
- 如何在jQuery中获取单选按钮组的值
- Javascript/Jquery将选择列表更改为单选按钮
- jquery使2组单选按钮相互镜像
- 如果使用jQuery验证器插件找到单选按钮,则将不同的addMethod应用于字段
- jQuery:如何查找id是动态生成的单选按钮是否被选中
- 如何在不使用jQuery的情况下设置数组以获取单选按钮值
- FlatUI - 单选按钮 jQuery 兼容性
- 如何将单选按钮的选定值复制到另一个单选按钮 - jquery
- 默认选中单选按钮- JQuery事件不工作
- 在单选按钮jQuery中传递数组值
- 动态创建单选按钮Jquery