AJAXを使用してボタン上でデータを送信

Question

複数の列（index.php）を持つ表があります。 1つの列はチェックボックスです。チェックボックスをオンにすると、数量を選択できる別の列が表示されます。

"Add to Order"というボタンを押して、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'); 
      } 
      }); 

    }) 
    }); 

}); 

Answer 1

別の使用のphpにあなたを1ページからデータを渡すために、 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."; 
}