使用AJAX按钮发送数据点击

时间:2017-05-19 12:43:04

标签: javascript php jquery ajax forms

我有一个包含多列的表(index.php)。一列是复选框。只要选中该复选框,它就会显示另一列,您可以在其中选择数量。

我希望能够点击一个名为“添加到订单”的按钮,并让它使用AJAX将任何选定的行添加到index-order.php页面。完成所有选择后,我希望能够单击“Checkout”按钮并将它带到index-order.php页面,它应该在表格中显示所有添加的选项。

我知道如何导航到index-order.php页面,所以我的主要问题是如何在按下按钮时使用ajax将所选行添加到index-order.php页面?

Index.php代码:

<form name="form1" action="index-order.php"> 

<section id="checkout-btn"> 
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</form>

<form name="form2" method="POST" action="index-order.php"> 

<section id="addToOrder">   
<button type="submit" class="order" id="order" name="order" value="AddToOrder">Add to Order</button>
</section>

<br>

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr>
        <td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
        <td name="rows[0][0][loc]" class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
        <td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
        <td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
        <td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
        <td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
        <td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
        <td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
        <td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
    </tr>

    <?php } ?>

    </tbody>
</table>
</form>

<div id="log"></div>

索引order.php:

<?php if(isset($_POST['rows'])): ?>
<table cellspacing="20">
    <tr align="center">
        <th>Loc</th>
        <th>Report Code</th>
        <th>SKU</th>
        <th>Special ID</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Unit</th>
        <th>Quantity #</th>
    </tr>
    <?php 
        foreach($_POST['rows'][0] as $row): 
    ?>
        <tr align="center">
            <td><?php echo $row['loc']; ?></td>
            <td><?php echo $row['rp-code']; ?></td>
            <td><?php echo $row['sku']; ?></td>
            <td><?php echo $row['special-id']; ?></td>
            <td><?php echo $row['description']; ?></td>
            <td><?php echo $row['quantity']; ?></td>
            <td><?php echo $row['unit']; ?></td>
            <td><?php echo $row['quant']; ?></td>
        </tr>
    <?php 
        endforeach; 
    ?>
</table>
<?php endif; ?>

JavaScript的:

$(function () {

  $("#order").click(function() {
  //reset the logger
  $('#log').empty();

  $('#merchTable input:checkbox:checked').each(function() {
    //for each checked checkbox, iterate through its parent's siblings
    var array = $(this).parent().siblings().map(function() {
      return $(this).text().trim();
    }).get();
    console.log(array);
    //to print the value of array
    $('#log').append(JSON.stringify(array))

    var request = $.ajax({
            type: 'post',
            url: 'index-order.php',
            data: array,
            success: function(){
                alert('success');
            },
            error: function(){
                alert('failure');
            }
          });

  })
  });

});

1 个答案:

答案 0 :(得分:0)

要使用php将数据从一个页面传递到另一个页面,您必须使用session

因此,在您的ajax调用中,只需将数据保存到会话中即可:

添加到cart.php

session_start();
if (!isset($_SESSION['shopping_cart'])) {
  $_SESSION['shopping_cart'] = [];
} else {
  $_SESSION['shopping_cart'][] = [
    'id' => $_POST['item_id'],
    'amount' => $_POST['amount']
  ];
}

如果您再单击结帐按钮并通过页面重新加载导航到 index-order.php ,则可以通过相同的会话索引访问数据。

session_start();
if (isset($_SESSION['shopping_cart'])) {
  // display your data
} else {
  echo "Your shopping cart is empty.";
}