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

I would like to make a bus seating plan. I have seating plan chart using javascript function.I have two radio button named Bus_1 and Bus_2 queried from databases. When I clicked one of radio button, I would like to get available seats to show on the seating plan. Problem is I can't write how to carry radio value and to show database result on seating plan. Please help me.

我想制定一个巴士座位计划。我有使用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>

2 个解决方案

#1

You can use the onclick to tell AJAX to get your information and then what to do with it using jQuery.

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

Data is not needed if you are not passing any variables.

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

#2

I use jQuery's .load() function to grab in an external php page, with the output from the database on it.

我使用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.
    }
}

Then, just create a jQuery call like this for each time each radio button is clicked.

然后，每次单击每个单选按钮时，只需创建一个这样的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');
     }
);

#1