jquery学习笔记-购物车表单简单实现

最新推荐文章于 2022-09-29 16:27:17 发布

mysuc

最新推荐文章于 2022-09-29 16:27:17 发布

阅读量971

点赞数

文章标签： jquery js ajax php

本文链接：https://blog.csdn.net/mysuc/article/details/37815627

版权

<span style="font-family: Arial, Helvetica, sans-serif;">购物车主html代码：</span>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车表单</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script src="shoppingCar.js" type="text/javascript"></script>
<style>
.even{
	background-color:#996;
}
.odd{
	background-color:#9CC;
}
.clickable{
	cursor:pointer;
}
</style>
</head>
<body>
<form action="checkout.php" method="post">
  <table id="cart">
    <thead>
      <tr>
        <th class="item">Item</th>
        <th class="quantity">Quantity</th>
        <th class="price">Price</th>
        <th class="cost">Total</th>
      </tr>
    </thead>
    <tfoot>
      <tr class="subtotal">
        <td class="item">Subtotal</td>
        <td class="quantity"></td>
        <td class="price"></td>
        <td class="cost">$152.95</td>
      </tr>
      <tr class="tax">
        <td class="item">Tax</td>
        <td class="quantity"></td>
        <td class="price">6%</td>
        <td class="cost">$9.18</td>
      </tr>
      <tr class="shipping">
        <td class="item">Shipping</td>
        <td class="quantity">5</td>
        <td class="price">$2 per item</td>
        <td class="cost">$10.00</td>
      </tr>
      <tr class="total">
        <td class="item">Total</td>
        <td class="quantity"></td>
        <td class="price"></td>
        <td class="cost">$172.13</td>
      </tr>
      <tr class="actions">
        <td></td>
        <td><input type="button" name="recalculate" value="Recalculate" id="recalculate"/></td>
        <td></td>
        <td><input type="submit" name="submit" value="Place Order" id="submit"/></td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td class="item">Building Telephony Systems With Asterisk</td>
        <td class="quantity"><input type="text" name="quantity-2" value="1" id="quantity-2" maxlength="3"/></td>
        <td class="price">$26.99</td>
        <td class="cost">$26.99</td>
      </tr>
      <tr>
        <td class="item">Smarty PHP Template Programming and Applications</td>
        <td class="quantity"><input type="text" name="quantity-1" value="2" id="quantity-1" maxlength="3"/></td>
        <td class="price">$35.99</td>
        <td class="cost">$71.98</td>
      </tr>
      <tr>
        <td class="item">Creating your MySQL Database: Practical Design Tips and Techniques</td>
        <td class="quantity"><input type="text" name="quantity-3" value="1" id="quantity-3" maxlength="3"/></td>
        <td class="price">$17.99</td>
        <td class="cost">$17.99</td>
      </tr>
      <tr>
        <td class="item">Drupal: Creating Blogs, Forums, Portals, and Community Websites</td>
        <td class="quantity"><input type="text" name="quantity-4" value="1" id="quantity-4" maxlength="3"/></td>
        <td class="price">$35.99</td>
        <td class="cost">$35.99</td>
      </tr>
    </tbody>
  </table>
</form>
<fieldset id="shipping">
    <legend>Shipping to:</legend>
    <a id="shipping-name" href="http://www.baidu.com">Ford Prefect</a>
  </fieldset>
</body>
</html>

shipping.js代码：

$(document).ready(function(){
	var stripe = function(){
		$('#cart tbody tr:visible:even').removeClass('odd').addClass('even');
		$('#cart tbody tr:visible:odd').removeClass('even').addClass('odd');
	};
	
	stripe();
	
	$('.quantity input').keypress(function(event){
		if (event.charCode && (event.charCode < 48 || event.charCode > 57)){
			event.preventDefault();
		}
	});
	
	$('.quantity input').change(function(){
		var totalQuantity = 0;
		var totalCost = 0;
		$('#cart tbody tr').each(function(){
			var price = parseFloat($('.price',this).text().replace(/^[^\d.]*/,''));
			price = isNaN(price) ? 0 : price;
			var quantity =  parseInt($('.quantity input',this).val());
			var cost = quantity * price;
			$('.cost',this).text('$' + cost.toFixed(2));
			totalQuantity += quantity;
			totalCost += cost;
		});
		$('.shipping .quantity').text(String(totalQuantity));
		var shippingRate = parseFloat($('.shipping .price').text().replace(/^[^\d.]*/,''));
		var shipping = totalQuantity * shippingRate;
		$('.shipping .cost').text('$' + shipping.toFixed(2));
		totalCost += shipping;
		$('.subtotal .cost').text('$' + totalCost.toFixed(2));
		
		var taxRate = parseFloat($('.tax .price').text()) / 100;
		var tax = Math.ceil(totalCost * taxRate * 100) / 100;
		$('.tax .cost').text('$' + tax.toFixed(2));
		totalCost += tax;
		
		$('.total .cost').text('$' + totalCost.toFixed(2));
	});
	
	$('#recalculate').hide();
	
	$('<th> </th>').insertAfter('#cart thead th:nth-child(2)');
	$('#cart tbody tr').each(function(){
		$deleteButton = $('<img/>').attr({
			'width':'16',
			'height':'16',
			'src':'images/del.png',
			'alt':'remove from cart',
			'title':'remove from cart',
			'class':'clickable'
		}).click(function(){
			$(this).parents('tr').find('.quantity input').val(0).trigger('change')
			  .end().hide();
			stripe();
		});
		$('<td></td>').insertAfter($('td:nth-child(2)',this))
		  .append($deleteButton);
	});
	$('<td> </td>').insertAfter('#cart tfoot td:nth-child(2)');
});

$(document).ready(function(){
	var editShipping = function(){
		$.get('shipping.php',function(data){
			$('#shipping-name').remove();
			$(data).hide().appendTo('#shipping').slideDown();
			$('#shipping form').submit(saveShipping);
		});
		return false;
	};
	var saveShipping = function(){
		var postData = $('#shipping :input').serialize();
		$.post('shipping.php',postData,function(data){
			$('#shipping form').remove();
			$(data).appendTo('#shipping');
			$('#shipping-name').click(editShipping);
		});
		return false;
	};
	$('#shipping-name').click(editShipping);
});

服务器端代码(shipping.php)：

<?php
if (isset($_POST['firstName'])){
	print '<a id="shipping-name" href="http://www.baidu.com">Ford Prefect</a>';
}else{
	?>
	<form action="#" method="post">
  <label for="firstName">First name:</label>
  <input type="text" name="firstName" value="<?php echo $_POST[firstName];?>"/><br/>
  <label for="address">Address:</label>
  <input type="text" name="address" value="<?php echo $_POST[address];?>"/><br/>
  <input type="submit" name="save" value="Save"/>
</form>
    <?php
}
?>