angular js 配合ajax 實現購物車功能

阿新 • • 發佈：2019-01-02

在這裡插入圖片描述

<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
class Gowu extends Controller
{
    public function index()
    {
        $data=db('shuju')
            ->field("name,price,number,done")
            ->select();
       return view('index');
    }

    public 
 function ajaxData(){
    	$data=db('shuju')
    		->field("name,price,number,done")
    		->select();
    	echo json_encode($data);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的購物車</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js" 
></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的購物車</h1>
<p ng-show="shopping">您的購物車為空<a href="#" ng-click="showS()">去逛商城</a></p>
<div class="nav"> 

    <button ng-click="clearShpooing()" ng-show="show">清空購物車</button>
</div>
<!--建立購物車列表-->
<table ng-show="show">
    <thead>
    <th><input type="checkbox" ng-model="check" ng-click="delAll(check)"></th>
    <th>name</th>
    <th>price</th>
    <th>number</th>
    <th>totalprice</th>
    <th>option</th>
    </thead>
    <tbody>
    <!--ng-repeat渲染資料到介面-->
    <tr ng-repeat="item in data">
        <td><input type="checkbox" ng-model="item.done" ng-click="checkS()"></td>
        <td>{{item.name}}</td>
        <td>{{item.price | currency:"￥"}}</td>
        <td>
            <button ng-click="jian($index)">-</button>
            <input type="text" ng-model="item.number" ng-checked="dianji()">
            <button ng-click="add($index)">+</button>
        </td>
        <td>{{item.price*item.number |currency:"￥"}}</td>
        <td>
            <button ng-click="remove($index)">刪除</button>
        </td>
    </tbody>
    <tfoot>
    <tr>
        <!--價錢起前面加"￥"-->
        <td colspan="6">總價為:{{allMoney | currency:"￥"}}</td>
    </tr>
    </tfoot>
</table>
<script>
        var myapp = angular.module("myapp", []);
        myapp.controller("myCtrl", function ($scope,$http) {
			$http({
			    method: 'POST',
			    url: "{:url('Gowu/ajaxData')}",
			    dataType: 'JSON'
			}).then(function successCallback(response) {
			       //自擬商品資訊
	            $scope.data = response.data;
	            //點選加號的方法
	            $scope.add = function (index) {
	                $scope.data[index].number++;
	                $scope.sum();
	            }
	            //點選減號的方法
	            $scope.jian = function (index) {
	                //點選-操作時,當商品數量為1時，彈出對話方塊，詢問是否移除
	                if ($scope.data[index].number == 1) {
	                    if (confirm("您是否將該商品移除購物車？")) {
	                        $scope.data[index].number--;
	                        $scope.data.splice(index,1);
	                        $scope.sum();
	                    }
	                } else if ($scope.data[index].number > 1) {
	                    $scope.data[index].number--;
	                    $scope.sum();

	                }
	            }

	            //計算商品總價的方法
	            $scope.sum = function () {
	                $scope.allMoney = 0;
	                for (var i = 0; i < $scope.data.length; i++) {
	                    $scope.allMoney += $scope.data[i].price * $scope.data[i].number;
	                }
	            }
	            $scope.sum();
	            //點選輸入框的方法
	            $scope.dianji = function () {
	                $scope.sum();
	            }
	            $scope.shopping = false;
                    //預設全選是不選的
	            $scope.check = false;
	            //刪除全部商品的方法
	            $scope.delAll = function (check) {
	                $scope.checkD(check);
	            }
	            $scope.checkD = function (state) {
	                for (var i = 0; i < $scope.data.length; i++) {
	                    $scope.data[i].done = state;
	                }
	            }
	//             //下面的選框代表
	            $scope.checkSS = false;
	            $scope.checkS = function () {
	                $scope.flag = 0;
	                for (var i = 0; i < $scope.data.length; i++) {
	                    if ($scope.data[i].done == true) {
	                        $scope.flag++;
	                        $scope.checkSS = true;
	                    }
	                }
	                //實現當下面全部選中，全選框選中的效果
	                if ($scope.flag == $scope.data.length) {
	                    $scope.check = true;
	                } else {
	                    $scope.check = false;
	                }
	            }
	            //判斷全選框下面的多選框有幾個的方法
	            //清空購物車的方法
	            $scope.clearShpooing = function () {
	                if ($scope.check == true || $scope.checkSS == true) {
	                    for (var i = 0; i < $scope.data.length; i++) {
	                        if ($scope.data[i].done == true) {
	                            $scope.data.splice(i--, 1);
	                            if ($scope.data.length == 0) {
	                                $scope.show = false;
	                                $scope.shopping = true;
	                            }
	                            $scope.sum();
	                        }
	                    }
	                    if ($scope.check == true) {
	                        $scope.data.length = 0;
	                        $scope.show = false;
	                        $scope.shopping = true;
	                    }
	                } else {
	                    alert("請先選擇要操作的商品");
	                }

	            }
	            $scope.show = true;
	            $scope.remove = function (index) {
	                $scope.data.splice(index, 1);
	                if ($scope.data.length == 0) {
	                    $scope.show = false;
	                    $scope.shopping = true;
	                }
	            }
	            //點選去逛商城的程式碼
	            $scope.showS=function () {
	                $scope.show = true;
	                $scope.check=false;
	            }
			    }, function errorCallback(response) {
			        alert('0');
			});
            
        });
    </script>
</body>
</html>

動圖展示：
在這裡插入圖片描述

angular js 配合ajax 實現購物車功能

<?php namespace app\index\controller; use think\Controller; use think\Db; class Gowu extends Controller { public function index() {

VUE.JS實現購物車功能

add http 功能 hang 總數 tps conf methods htm 購物車是電商必備的功能，可以讓用戶一次性購買多個商品，常見的購物車實現方式有如下幾種： 1. 用戶更新購物車裏的商品後，頁面自動刷新。 2. 使用局部刷新功能，服務器端返回整個購物

jQuery 分頁插件（jQuery.pagination.js）ajax 實現分頁

height var 實現 before 狀態 pin 好的調用是否首先需要引入jQuery 再次需要引入 <script src="jquery/jquery.pagination.js"></script>同時也要引入 <link r

電商---實現購物車功能

decode typeof led 不存在 htm 問題 cap ssi des 購物車實現3種方式 1、利用cookie 優點：不占用服務器資源，可以永遠保存，不用考慮失效的問題缺點：對購買商品的數量是有限制的，存放數據的大小不可以超過2k，用戶如果禁用cook

原生js使用ajax實現省市縣三級聯動

chang onchange mes ror charset += ctype type nload <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

Vue.js——基於$.ajax實現數據的跨域增刪查改

-a serialize 復古不可部署 gis 地址實體完成概述之前我們學習了Vue.js的一些基礎知識，以及如何開發一個組件，然而那些示例的數據都是local的。在實際的應用中，幾乎90%的數據是來源於服務端的，前端和服務端之間的數據交互一般是通過ajax請求

實現購物車功能 --- 文件操作版

sent not 判斷保存進入 ali 修改能夠 ret 1.用戶接口 >>>判斷用戶工資是否有記錄 >>>能夠從文件中讀取商品列表 >>>能夠選擇想要的商品，並扣除工資 >>>打印並保存訂單信息

js代碼實現購物車效果

todo ssa lse custom () 分享 sel map 失敗頁面分上下兩部分，上部分是所有的數據，下部分是購物車。通過在上面選擇需要處理的數據添加進到購物車，實現對購物車數據的統一處理。需要註意的有兩點：①購物車數據可刪除，且不能重復添加 ②響應時間考慮，

1.實現購物車功能

alex for div 直接 watch car code pen dex # 1輸入工資，打印商品列表 # 2根據id選擇商品 # 3選擇商品檢查余額是否不足，直接扣款，提醒 # 4隨時退出，打印購物車 product_list = [ (‘Iphone‘,

cookie來實現購物車功能

pub boolean lis 商品 tao this token ont variable 一、大概思路　　1、從cookie中取商品列表　　2、判斷要添加的商品是否存在cookie中。　　3、如果已添加過，則把對應的商品取出來，把要添加的商品的數量加上去。　　4

用python實現購物車功能

功能鼠標購物車 %d () 顯示 ood 自己根據 """功能要求：1.要求用戶輸入自己擁有的總資產，例如：20002.顯示商品列表的序號,商品名稱,商品價格，讓用戶根據序號選擇商品，然後加入購物車例如: 1 電腦 1999 2 鼠

Canvas配合MotionEvent實現畫板功能

最近在學習Android中關於控制元件滑動以及2D繪製圖形API，所以就簡單的結合了兩者做了一個簡易的畫板功能，很多畫板都是通過自定義View或者SurfaceView來實現，在後續我也會做，但是今天就簡單的用Bitmap建立Canvas然後通過ImageV

nginx配合modsecurity實現WAF功能

modsecurity原本是Apache上的一款開源waf，可以有效的增強web安全性，目前已經支援nginx和IIS，配合nginx的靈活和高效，可以打造成生產級的WAF，是保護和稽核web安全的利器。一.準備工作系統：centos 6.5 64位、 tengine 2.1.0， modsecuri