php - 单击单选按钮时如何从 mysql 获取结果并使用 jquery 显示？

Question

我想制定一个巴士座位计划。我有使用 javascript 函数的座位表。我从数据库中查询了两个名为 Bus_1 和 Bus_2 的单选按钮。当我单击其中一个单选按钮时，我想获得可用座位以显示在座位表上。问题是我无法编写如何承载 radio 值以及如何在座位表上显示数据库结果。请帮助我。

<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>

Answer 1

您可以使用 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
    }
  });
}

如果您不传递任何变量，则不需要数据。