jquery座位图PHP:将数据价格存储到mysql db

时间:2017-03-16 14:31:05

标签: javascript php jquery mysql database

我有一个php项目,它在db msql中插入了剧院所选座位的坐标。 enter image description here 这是绘制地图并包含变量的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>R'+(this.settings.row+1)+' S'+this.settings.label+' P'+this.settings.data.price+'</option>')

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

感谢任何建议

1 个答案:

答案 0 :(得分:0)

在许多论坛中经过多次尝试和发帖后,我找到了我的解决方案。

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文件(划分座位数组 - 用&#34分隔; |&#34; - 发布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>";
    }

} 
?>