javascript - 从 javascript 获取变量并在 php 上为 jQuery-Seat-Charts 构建一个 sql 查询

Question

我正在使用 jQuery-Seat-Charts为我们公司的巴士建立一个简单的预订系统(如果我可以命名为系统的话)。由于我不是 javascript 专家，我需要您宝贵的帮助来弄清楚如何完成这项工作。我只想从 javascript 中获取变量并在 php 上构建一个 sql 查询以将整个信息存储在 MySQL 数据库中。我现在有以下内容:

<div class="wrapper">
        <div class="container">
            <div id="seat-map">
                <div class="front-indicator">Front</div>

            </div>
            <div id="legend"></div>
            <div class="booking-details">
                <h2>Booking Details</h2>

                <h3> Selected Seats (<span id="counter">0</span>):</h3>
                <ul id="selected-seats"></ul>

                Total: <b><span id="total">0</span> &#8364;</b>

                <button class="checkout-button">Book&raquo;</button>

            </div>
            <div id="formulari">
                <ul id="formulari-ul"> </ul>
            </div>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="`jquery.seat-charts.js`"></script>

    <script>
        var firstSeatLabel = 1;

        $(document).ready(function() {
            var $cart = $('#selected-seats'),
                $formulari = $('#formulari-ul'),
                $counter = $('#counter'),
                $total = $('#total'),
                sc = $('#seat-map').seatCharts({
                map: [
                    '___f',
                    'ff',
                    'ee_e',
                    'ee_e',
                    'ee_e',
                    'eeee',
                ],
                seats: {
                    f: {
                        price   : 60,
                        classes : 'first-class', //your custom CSS class
                        category: 'First Class'
                    },
                    e: {
                        price   : 55,
                        classes : 'other-seats', //your custom CSS class
                        category: 'Other Seats'
                    }                   

                },
                naming : {
                    top : false,
                    getLabel : function (character, row, column) {
                        return firstSeatLabel++;
                    },
                },
                legend : {
                    node : $('#legend'),
                    items : [
                        [ 'f', 'available',   'First Class' ],
                        [ 'e', 'available',   'Other Seats'],
                        [ 'f', 'unavailable', 'Booked']
                    ]                   
                },
                click: function () {
                    if (this.status() == 'available') {
                        //let's create a new <li> which we'll add to the cart items
                        $('<li><strong>Seat #'+this.settings.label+' - Price: '+this.data().price+'&#8364; </strong> ('+this.data().category+') <a href="#" class="cancel-cart-item">[cancel]</a></li>')
                            .attr('id', 'cart-item-'+this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($cart);

                        $('<p><strong>[X] Seat #'+this.settings.label+':</strong> <input name="fullname" type="text" value="Full Name" /><input name="birthday" type="text" value="dd/mm/yyyy" size="10" /><input name="placeBirth type="text" value="Place" size="10" /><input name="nrPass" type="text" value="Nr Pass" size="10" /><input name="passFrom" type="text" value="dd/mm/yyyy" size="10" /><input name="passTo" type="text" value="dd/mm/yyyy" size="10" /></p>')
                            .attr('id', 'form-item-'+this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($formulari);

                        /*
                         * Lets update the counter and total
                         *
                         * .find function will not find the current seat, because it will change its stauts only after return
                         * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
                         */
                        $counter.text(sc.find('selected').length+1);
                        $total.text(recalculateTotal(sc)+this.data().price);

                        return 'selected';
                    } else if (this.status() == 'selected') {
                        //update the counter
                        $counter.text(sc.find('selected').length-1);
                        //and total
                        $total.text(recalculateTotal(sc)-this.data().price);

                        //remove the item from our cart
                        $('#cart-item-'+this.settings.id).remove();

                        //seat has been vacated
                        return 'available';
                    } else if (this.status() == 'unavailable') {
                        //seat has been already booked
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });

            //this will handle "[cancel]" link clicks
            $('#selected-seats').on('click', '.cancel-cart-item', function () {
                //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
                sc.get($(this).parents('li:first').data('seatId')).click();
            });

            //let's pretend some seats have already been booked
            sc.get(['1_4']).status('unavailable');

    });

    function recalculateTotal(sc) {
        var total = 0;

        //basically find every selected seat and sum its price
        sc.find('selected').each(function () {
            total += this.data().price;
        });

        return total;
    }

    </script>

如您所见，我有点击功能，当用户点击任何可用座位时，将出现一个表格，用户应填写该表格的详细信息。我一直进步到这里，现在我不知道如何获取 javascript 变量作为座位号、座位价格和座位代码(所有座位都编码为 X_Y，其中 X = 行，Y = 该行的座位号);并使用这些变量和表单中的信息构建一个 sql 查询。
希望我清楚地解释了我的需求和问题，并且有人可以帮助我让我走上正轨 ;-)
谢谢大家!
附言可以找到 jquery.seat-chart.js 文件 here !

Answer 1

大家好
通过搜索很多天并测试多种方法，我遇到了这个解决方案。可能会对遇到或将遇到我遇到的相同问题的其他人有所帮助。
如您所见，我已经删除了所有的 id #formulari 和它的 div，因为我决定让整个过程分为多个步骤。所以，我首先(第 1 步)所做的是为每个选定的座位添加一些隐藏的输入；实际上用 POST 创建了一个表单，将 seatNR 和 seatCode 传递到下一步；并获取有关客户的一些信息，例如姓名、电话号码和电子邮件:

                <div class="wrapper">
                  <div class="col_12">
                <legend><strong>Details for person of contact</strong></legend>
            <div class="col_4">
                <label for="rezname"><strong>Your Name</strong> </label>
                <input id="rezEmri" name="rezEmri" type="text" class="col_12" value="" />
            </div>

            <div class="col_4">
                <label for="rezEmail"><strong>Your Email</strong> <span>where the reservation details will be sent</span></label>
                <input id="rezEmail" name="rezEmail" type="text" class="col_12" value="" />
            </div>

            <div class="col_4">
                <label for="rezTel"><strong>Your Phone Nr</strong> </label>
                <input id="rezTel" name="rezTel" type="text" class="col_12" value="" />
            </div>
        </div>
    <div class="container">
        <div id="seat-map">
            <div class="front-indicator">Front</div>

        </div>
        <div id="legend"></div>
        <div class="booking-details">
            <form action="transport.php?step=2" method="post">
            <h2>Booking Details</h2>

            <h3> Selected Seats (<span id="counter">0</span>):</h3>
            <ul id="selected-seats"></ul>

            Total: <b><span id="total">0</span> &#8364;</b>

            <button class="checkout-button">Next &raquo;</button>
            </form>

        </div>
    </div>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="`jquery.seat-charts.js`"></script>

<script>
    var firstSeatLabel = 1;

    $(document).ready(function() {
        var $cart = $('#selected-seats'),
            $counter = $('#counter'),
            $total = $('#total'),
            sc = $('#seat-map').seatCharts({
            map: [
                '___f',
                'ff',
                'ee_e',
                'ee_e',
                'ee_e',
                'eeee',
            ],
            seats: {
                f: {
                    price   : 60,
                    classes : 'first-class', //your custom CSS class
                    category: 'First Class'
                },
                e: {
                    price   : 55,
                    classes : 'other-seats', //your custom CSS class
                    category: 'Other Seats'
                }                   

            },
            naming : {
                top : false,
                getLabel : function (character, row, column) {
                    return firstSeatLabel++;
                },
            },
            legend : {
                node : $('#legend'),
                items : [
                    [ 'f', 'available',   'First Class' ],
                    [ 'e', 'available',   'Other Seats'],
                    [ 'f', 'unavailable', 'Booked']
                ]                   
            },
            click: function () {
                    if (this.status() == 'available') {
                        <?php /*?>//let's create a new <li> which we'll add to the cart items<?php */?>
                        $('<li><strong>Seat #'+this.settings.label+' - Price: '+this.data().price+'&#8364; </strong> ('+this.data().category+') <a href="#" class="cancel-cart-item" style="color: #b71a4c;">[cancel]</a><input type="hidden" name="seatNR['+this.settings.label+']" value="'+this.settings.label+'"><input type="hidden" name="seatCode['+this.settings.label+']" value="'+this.settings.id+'"></li>')
                            .attr('id', 'cart-item-'+this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($cart);


                        .attr('id', 'form-item-'+this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($formulari);

                    /*
                     * Lets update the counter and total
                     *
                     * .find function will not find the current seat, because it will change its stauts only after return
                     * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
                     */
                    $counter.text(sc.find('selected').length+1);
                    $total.text(recalculateTotal(sc)+this.data().price);

                    return 'selected';
                } else if (this.status() == 'selected') {
                    //update the counter
                    $counter.text(sc.find('selected').length-1);
                    //and total
                    $total.text(recalculateTotal(sc)-this.data().price);

                    //remove the item from our cart
                    $('#cart-item-'+this.settings.id).remove();

                    //seat has been vacated
                    return 'available';
                } else if (this.status() == 'unavailable') {
                    //seat has been already booked
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });

        //this will handle "[cancel]" link clicks
        $('#selected-seats').on('click', '.cancel-cart-item', function () {
            //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
            sc.get($(this).parents('li:first').data('seatId')).click();
        });

        //let's pretend some seats have already been booked
        sc.get(['1_4']).status('unavailable');

});

function recalculateTotal(sc) {
    var total = 0;

    //basically find every selected seat and sum its price
    sc.find('selected').each(function () {
        total += this.data().price;
    });

    return total;
}

</script>

STEP 2 => 我从 STEP 1 的 POST 中获取变量，并像这样处理信息:

if(isset($_GET['step']) && (mysql_real_escape_string(preg_replace('/[^0-9]/', '', $_GET['step']))=='2')) {
            $seatNR = $_POST['seatNR'];
            $seatCode = $_POST['seatCode'];
           // I'm not showing the client details process, as it's clear the way i do it :)

附言联系人的详细信息已在数据库中注册，并将与该特定预订/预订的旅客详细信息相关联。这样，我们就有了预订者的详细信息，以及所有旅客的详细信息。

在我过滤输入并进行所需的验证后(特定于我的系统，其中将集成此座位选择器)，我显示输入字段，访客将在其中放置旅客详细信息(姓名、护照号码等)。这就是我做的方式:

<?php
foreach( $seatNR as $key => $n ) {
  print '<tr>'; 
  print ' <td><strong style="font-size:14px;"><center>'.$n.'</center></strong></td>
  ';
  print '<td><input type="text" name="trav[][Name]" size="20" value=""></td>
  ';
  print '<td><input type="text" name="trav[][Birthday]" size="9" value=""></td>
  ';
  print '<td><input type="text" name="trav[][PlaceBirth]" size="14" value=""></td>
  ';
  print '<td><input type="text" name="trav[][passNr]" size="10" value=""></td>
  ';
  print '<input type="hidden" name="trav[][seatNR]" value="'.$n.'">
  ';
  print '<input type="hidden" name="trav[][seatCode]" value="'.$kodiVendit[$key].'">
  ';

  print '</tr>';
}
?>

因此，使用此 foreach 将显示与访问者选择的座位一样多的行。如果访问者选择了 5 个座位​​，将出现 5 行输入字段。

STEP 3 => 将从STEP 2 的表单中获取全部信息，并在验证所有信息是否正确后，将被插入到MySQL 数据库中。
所以，这就是我所做的。如果你们中的任何人有任何建议可以做得更好，我会很高兴知道。
祝大家好运;-)

编辑:我忘记为表单处理器添加循环。如下:

// To get the last id of reservation and to insert it at traveler details.
// This way we create a connection btw the traveleres and who made the reservation
$sql33="SELECT rezID, rezDataRez FROM transport_reservations ORDER BY rezID DESC LIMIT 1;";
            $res33=mysql_query($sql33)or die(mysql_error().$sql33);
            $row33=mysql_fetch_array($res33);
            $$lastRezID=$row33[0];
// Start the verification and insertion of traveler details on the db
 define('HOST', '*********');
    define('DBNAME', '*********');
    define('USERNAME', '**********');
    define('PASSWORD', '********');
    $dbREZ = new mysqli(HOST,USERNAME,PASSWORD,DBNAME);

    $dataREZ = array();            
    foreach ($_POST['trav'] as $a) {
    /**
    * sanitize string data and format dates
    */  
    $dataREZ[] = sprintf("('%s','%s','%s','%s','%s','%s','%s')",
                $dbREZ->real_escape_string($lastRezID),
                $dbREZ->real_escape_string($a['Name']),
                date('Y-m-d', strtotime($a['Birthday'])),
                $dbREZ->real_escape_string($a['PlaceBirth']),
                $dbREZ->real_escape_string($a['passNr']),
                $dbREZ->real_escape_string($a['seatNr']),
                $dbREZ->real_escape_string($a['seatCode']),
                );

}
$sqlAddTrav = "INSERT INTO transport_travelers (rezID, travName, travBirthday, travBirthPlace, travPass, travSeatNr, travSeatCode) VALUES \n" . join(",\n", $dataREZ);
$dbREZ->query($sqlAddTrav);

希望一切都清楚。