ホームページ > 記事 > バックエンド開発 > php+MySQL+jQuery+Ajaxによるショッピングカート機能の実装

php+MySQL+jQuery+Ajaxによるショッピングカート機能の実装

jackloveオリジナル: 2018-06-15 14:48:223670ブラウズ

推奨される関連する mysql ビデオチュートリアル: 「mysql チュートリアル」

データベース構造:

3つのファイルを用意します:

1.cart.php //フロントエンド表示ファイル

2.cart_ajax.php //Ajaxデータの処理

3.config.php //データベース構成

1、cart.php

<pre name="code" class="html"><?php

include &#39;config.php&#39;;
$sql = "select * from cart";
$result = mysql_query($sql);
$row = array();
while($rows = mysql_fetch_array($result,MYSQL_ASSOC)){
    $row[] = $rows;
}
//print_r($row);
?>
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table width="" border="1" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td>商品名称</td>
        <td>商品库存</td>
        <td>商品单价</td>
        <td>购买数量</td>
        <td>小计</td>
        <td>操作</td>
    </tr>
    <!--遍历数据-->
    <?php foreach($row as $key=>$val){?>

    <tr>
        <td><?php echo $val[&#39;name&#39;] ?></td>
        <td><?php echo $val[&#39;total_quantity&#39;] ?></td>
        <!--商品单价-->
        <td><input type="text" name="price" value="<?php echo $val[&#39;price&#39;] ?>"></td>
        <td>
            <button onclick="minusCart(this, &#39;<?php echo $val[&#39;id&#39;] ?>&#39;)">-</button>
            <!--购买数量-->
            <input type="text" name="num" value="<?php echo $val[&#39;num&#39;] ?>" max="<?php echo $val[&#39;total_quantity&#39;] ?>" />
            <button onclick="plusCart(this, &#39;<?php echo $val[&#39;id&#39;] ?>&#39;)">+</button>
        </td>
        <!--小计价格  -->
        <td><input type="text" name="subtotal_price" value="<?php echo $val[&#39;price&#39;]*$val[&#39;num&#39;];?>" onclick="price()"></td>
        <td><button>编辑</button><button>删除</button></td>
    </tr>

    <?php }?>

    <tr>
        <!--总价-->
        <td>总价</td>
        <td colspan="4">0元</td>
    </tr>
</table>
<!--<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>-->
<script src="jquery-2.1.1.min.js"></script>
<script>
    function setPrice(o) {//设置小计和总价
        var tr = o.closest(&#39;tr&#39;);
        var ipt = tr.find(&#39;input&#39;);
        ipt.filter(&#39;:last&#39;).val(parseInt(o.val()) * parseInt(ipt.eq(0).val(), 10));
        var sum = 0;
        o.closest(&#39;tbody&#39;).find(&#39;input[name="subtotal_price"]&#39;).each(function () { sum += parseInt(this.value, 0) || 0; })
            .end().find(&#39;td:last&#39;).html(sum+&#39;元&#39;)
    }
    //减
    function minusCart(_this, id){
        var num_input = $(_this).next(&#39;input[name="num"]&#39;);
        var num = parseInt(num_input.val());
        num--;
        if(num <= 0){
            return false;
        } else {
            num_input.val(num);
            setPrice(num_input);
            cartNum(num_input, id, num);
        }
    }
    //加
    function plusCart(_this,id){
        //获取购买数量
        var num_input = $(_this).prev(&#39;input[name="num"]&#39;);
        var num = parseInt(num_input.val());
        var total_quantity = parseInt(num_input.attr(&#39;max&#39;));
        if(num >= total_quantity){
            alert(&#39;库存不足&#39;);
            return false;
        }else {
            //alert(num);
            num = parseInt(num) + 1;
            num_input.val(num);
            setPrice(num_input);
            cartNum(num_input, id, num);
        }
    }

    /**
     * 修改购物车商品数量
     * @param _this
     * @param id
     * @param num
     */
    function cartNum(_this, id, num){
        $.ajax({
            type: &#39;POST&#39;,
            url: &#39;cart_ajax.php&#39;,
            data: {id: id, num: num},
            dataType: &#39;json&#39;,
            success: function (res) {
                if (res.status == 1) {
                    _this.val(num);
                }else{
                    alert(res.info);
                }
            }
        });
    }



</script>
</body>
</html>

2、config.php

<?php
/**
 *email:scenewood@163.com
 *name:郑小木
 */
$server = &#39;localhost&#39;;
$data = &#39;shopping&#39;;
mysql_connect($server,&#39;root&#39;,&#39;root&#39;);
mysql_set_charset(&#39;utf8&#39;);
mysql_select_db($data);

3 、cart_ajax.php

<?php
/**
 *email:scenewood@163.com
 *name:郑小木
 */
include &#39;config.php&#39;;


//接受cart.php的数据
if ($_POST) {
    $id = $_POST[&#39;id&#39;];
    $num = $_POST[&#39;num&#39;];
    $retureInfo = array(
        &#39;status&#39; => 0,
        &#39;info&#39; => &#39;修改商品数量失败&#39;
    );
    $sql = "UPDATE `cart` SET num=&#39;{$num}&#39; WHERE `id`={$id}";
    mysql_query($sql);
    $row = mysql_affected_rows();
    if ($row == 1) {
        $retureInfo[&#39;status&#39;] = 1;
        $retureInfo[&#39;info&#39;] = &#39;修改商品数量成功&#39;;
    }
    echo json_encode($retureInfo);
}

この記事では、php MySQL jQuery Ajax を使用してショッピングカート機能を実装する方法について説明します。関連コンテンツの詳細については、php 中国語 Web サイトを参照してください。

php+MySQL+jQuery+Ajaxによるショッピングカート機能の実装

関連記事