如何在jquery中获取<li>值并在php中获取值

时间:2017-03-08 09:57:11

标签: javascript php jquery

我正在尝试获取此值并在php上获取它:

$cart = $('#selected-seats')

这是代码:

 var price = <?php $price  = 400; echo $price;?>; //price
 $(document).ready(function() {
 var $cart = $('#selected-seats'), //Sitting Area
 $counter = $('#counter'), //Votes
 $total = $('#total'); //Total money    

 var sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aa_aa',
        'aaaaa',        

    ],
    naming : {
        top : false,
        getLabel : function (character, row, column) {
            return column;
        }
    },
    legend : { //Definition legend
        node : $('#legend'),
        items : [
            [ 'a', 'available',   'Option' ],
            [ 'a', 'unavailable', 'Sold']
        ]                   
    },

    click: function () { //Click event
        if (this.status() == 'available') { //optional seat
        $('<li>'+(this.settings.row+1)+'_'+this.settings.label+'</li>')
                .attr('id', 'cart-item-'+this.settings.id)
                .data('seatId', this.settings.id)
                .appendTo($cart);


            $counter.text(sc.find('selected').length+1);
            $total.text(recalculateTotal(sc)+price);


            return 'selected';
        } else if (this.status() == 'selected') { //Checked
                //Update Number
                $counter.text(sc.find('selected').length-1);
                //update totalnum
                $total.text(recalculateTotal(sc)-price);

                //Delete reservation
                $('#cart-item-'+this.settings.id).remove();
                //optional
                return 'available';
        } else if (this.status() == 'unavailable') { //sold
            return 'unavailable';
        } else {
            return this.style();
        }
    }
});     

//sold seat
sc.get([]).status('unavailable');

});
//sum total money
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
    total += price;
});

return total;
}
</script>

这是我的HTML代码:

<div class="container">
<div class="row">
<div class="col-md-7">
<br>
<div class="demo">
    <div id="seat-map">             
    </div>
    <div class="booking-details">
        <p>Time: <span>November 3, 21:00</span></p>
        <p>Seat: </p>
        <ul id="selected-seats"></ul>
        <p>No of Seats: <span id="counter">0</span></p>
        <p>Total: <b>P<span id="total">0</span></b></p>
            <br>    
        <button type="button" class="btn btn-custom" name="book" onclick="book();">Book</button>

        <div id="legend"></div>
    </div>
    <div style="clear:both">
    </div>
    <div id="result"></div>
</div>

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

如何获取$ cart的值并在php中获取该值?

我刚才使用jquery并且没有使用ajax的背景,请帮忙。

3 个答案:

答案 0 :(得分:0)

var getLiData = [];

$("ul li").each(function(){
    getLiData.push($(this).html());
});

然后将其发送到带有Ajax请求的回调php文件

答案 1 :(得分:0)

您需要在接受JSON字符串的服务器端(PHP)上创建一个端点,然后从客户端(Javascript)通过AJAX发送数据

对于Exmaple:

服务器端(PHP)

<?php
$payload = file_get_contents('php://input');
$request = json_decode($payload);

//TODO: Your handling logic here
// Accessing the array by $request->{'selectedSeats'}

$rsp = array('success'=>true);
echo json_encode($rsp);
?>

客户端(Javascript)

var request = {
    selectedSeats: []
};

$("#selected-seats li").each(function(){
    request.selectedSeats.push($(this).html());
});

$.ajax({
    method: "POST",
    url: "api.php",
    data: request,
    success: function(rsp){
        if(rsp.success){
            alert("Success");
        }else{
            alert("Fail");
        }
    },
    error: function(){
        alert("Fail");
    }
});

答案 2 :(得分:0)

首先让我回答你的问题..

这将为您提供所选座位ID的数组:

var seatsInCart = $cart.children().map(function(i, el) { return $(el).data('seatId') })

然后您可以通过Ajax发布您的数据,如下所示:

$.post("cart.php", { seats: seatsInCart })
  .done(
    function(data) {
      alert("Response from server: " + data);
    }
  );

然而,为什么你不是只是存储座位ID - 或者你将使用什么来识别所选座位 - 在javascript变量中选择它?从DOM中提取它是不必要的复杂。

然后更好的是根据该数组呈现席位列表。否则你可能很快就会发现自己处于混乱的jQuery DOM操作中,这些操作非常脆弱,每次碰到任何东西都会破坏。

查看http://knockoutjs.com/,这是一个很好的工具,可以轻松理解这些用例。如果你觉得特别大胆,你甚至可以考虑在这里使用ReactJS。