javascript - jquery 座位表 PHP : store data price to mysql db

Question

我有一个 php 项目，它在 db msql 中插入剧院选定座位的坐标。 这是绘制 map 并包含变量的 js 文件。

var price = 0; //price
var $cart = $('#selected-seats'); //Sitting Area
var $counter = $('#counter'); //Votes
var $total = $('#total'); //Total money

var sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
        'aaaaaaaaaa',
                'aaaaaaa__a',
                'aaaaaaaaaa',
                'aaaaaaaaaa',
        'aaaaaaabbb'
    ],
    naming : {
        top : true,
        rows: ['A','B','C','D','E'],
        getLabel : function (character, row, column) {
            return column;
        }
    },
    seats:{
        a:{
            price: 99.9
        },
        b:{
            price: 200
        }
    },
    legend : { //Definition legend
        node : $('#legend'),
        items : [
            [ 'a', 'available',   'Option' ],
            [ 'a', 'unavailable', 'Sold']
        ]
    },
    click: function () { //Click event
        if (this.status() == 'available') { //optional seat
            var maxSeats = 3;
            var ms = sc.find('selected').length;
            //alert(ms);
            if (ms < maxSeats) {

                price = this.settings.data.price;



        $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .attr('value', this.settings.id)
                    .attr('alt', price)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);

                $counter.text(sc.find('selected').length+1);
                $counter.attr('value', sc.find('selected').length+1);

                $total.text(recalculateTotal(sc));
                $total.attr('value', recalculateTotal(sc));

                return 'selected';
            }
                alert('You can only choose '+ maxSeats + ' seats.');
                return 'available';

        } else if (this.status() == 'selected') { //Checked

                //Update Number
                $counter.text(sc.find('selected').length-1);
                $counter.attr('value', sc.find('selected').length-1);

                //Delete reservation
                $('#cart-item-'+this.settings.id).remove();

                //update totalnum
                $total.text(recalculateTotal(sc));
                $total.attr('value', recalculateTotal(sc));

                //Delete reservation
                  //$('#cart-item-'+this.settings.id).remove();
                //optional
                return 'available';

        } else if (this.status() == 'unavailable') { //sold
            return 'unavailable';

        } else {
            return this.style();
        }
    }
});
function number_format (number, decimals, decPoint, thousandsSep) { // eslint-disable-line camelcase

  number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
  var n = !isFinite(+number) ? 0 : +number
  var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
  var sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
  var dec = (typeof decPoint === 'undefined') ? '.' : decPoint
  var s = ''
  var toFixedFix = function (n, prec) {
    var k = Math.pow(10, prec)
    return '' + (Math.round(n * k) / k)
      .toFixed(prec)
  }
  // @todo: for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep)
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += new Array(prec - s[1].length + 1).join('0')
  }
  return s.join(dec)
}

// Add total money
function recalculateTotal(sc) {
    var total = 0;
    $('#selected-seats').find('option:selected').each(function () {
        total += Number($(this).attr('alt'));
    });

    return number_format(total,2,'.','');
}

这个文件被PHP文件以这样的形式查看

        <div class="demo" style="margin-top:10px;min-width: 360px;">
            <div id="seat-map">
                <div class="front">SCREEN</div>     
            </div>
            <div id="legend"></div>
        </div>


        <form role="form" id="myfrm2" action="book.php?id=<?php echo $FILM_ID; ?>" method="post">
            <input type="hidden" name="session" value="<?php echo $session; ?>">
            <input type="hidden" name="date" value="<?php echo $date; ?>">

      <select class="form-control" style="display:block;" id="selected-seats" name="seat[]" multiple="multiple"></select>

            <p>Tickets: <input id="counter" name="counter" readonly></input></p>
            <p>Total: <b>&euro;<input id="total" name="total" readonly></input></b></p>
            <button type="submit" style="display: block; width: 100%;" name="book" value="book" class="btn btn-danger">Book</button>
        </form>
        <?php } ?>      
        </div>

所有数据都通过这个 PHP 文件插入数据库 mysql

<?php 
if (isset($_POST['book'])) {
    $date = $_POST["date"];
    $session = $_POST["session"];
    $counter = $_POST["counter"];
    $total = $_POST["total"];
    $user_id = $_SESSION["id"];
    $film_id = $_GET['id'];
    $seat = (isset($_POST['seat']) ? $_POST['seat']:array());
    if (is_array($seat)) {                  
        foreach ($seat as $selectedOption){
            $query = "INSERT INTO booking(USER_ID, FILM_ID, BOOKING_SESSION, BOOKING_DATE, BOOKING_SEAT, BOOKING_PRICE, BOOKING_NUM) 
                        VALUES ('$user_id','$film_id','$session','$date','$selectedOption','$total','$counter')";

            $result = mysqli_query ($connection,$query)
                or die ("<div class='alert alert-danger' role='alert'>You couldn't execute query</div>");   
            }
        echo "  <div class='alert alert-success' role='success'>
                    Congrats your booking has been done! Print the tickets <a href='./fpdf18/generate-pdf.php?film=$film_id' target='_blank'>here</a>!
                </div>";
    }

} 
?>

一切正常，所有数据都已插入数据库!

但是我添加了一个数据插入到DB中，价格SEAT_PRICE，所以我把JS文件中的“option selected”改成了这个

$('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+' P'+this.settings.data.price+'</option>')

价格(控制台中的标签是“alt”现在在页面上可见，但我不明白如何将此数据存储到数据库。

感谢任何建议

Answer 1

好的，经过多次尝试并在许多论坛发帖后，我找到了我的解决方案。

1) 必须像那样修改 JS 文件(传递 2 个值):

                $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+' P'+this.settings.data.price+'</option>')
                .attr('id', 'cart-item-'+this.settings.id)
                .attr('value', this.settings.id + "|" + this.settings.data.price)
                .attr('alt', price)
                .data('seatId', this.settings.id)
                .appendTo($cart);

2) PHP 文件必须像这样更改(划分座位数组 - 用“|”分隔 - 发布 2 个值:

<?php 
if (isset($_POST['book'])) {
    $date = $_POST["date"];
    $session = $_POST["session"];
    $counter = $_POST["counter"];
    $total = $_POST["total"];
    $user_id = $_SESSION["id"];
    $film_id = $_GET['id'];
    $seat = (isset($_POST['seat']) ? $_POST['seat']:array());
    if (is_array($seat)) {                  
        foreach ($seat as $selectedOption){
        $ar = explode('|',$selectedOption);
            $query = "INSERT INTO booking(USER_ID, FILM_ID, BOOKING_SESSION, BOOKING_DATE, BOOKING_SEAT, SEAT_PRICE, BOOKING_PRICE, BOOKING_NUM) 
                        VALUES ('$user_id','$film_id','$session','$date','$ar[0]','$ar[1]','$total','$counter')";

            $result = mysqli_query ($connection,$query)
                or die ("<div class='alert alert-danger' role='alert'>You couldn't execute query</div>");   
            }
        echo "  <div class='alert alert-success' role='success'>
                    Congrats your booking has been done! Print the tickets <a href='./fpdf18/generate-pdf.php?film=$film_id' target='_blank'>here</a>!
                </div>";
    }

} 
?>