<div class="goodsList_menu">
<div class="goodsList">
<div class="goodsListfl">
<input class="fl" style="margin:15px 10px 0 10px;" type="checkbox" name="" />
<ul>
<li>全选</li>
<li>商品</li>
</ul>
</div>
<div class="goodsListfr fr">
<ul>
<li>单价</li>
<li class="w100">数量</li>
<li class="w100">小计</li>
<li>操作</li>
</ul>
</div>
</div> <!--内容-->
<div class='goodsListbox'></div>
<div class="checkout">
<div class="checkoutleft">
<input class="fl" style="margin:21px 10px 0 10px;" type="checkbox" name="" />
<ul>
<li>全选</li>
<li>删除选中产品</li>
</ul>
</div>
<div class="checkoutright fr">
<span>总价:<b>¥</b></span><span class="checkoutSum">0</span>
<input type="button" value="去结算" />
</div>
</div>
</div>
body,html,ul,li,a{
margin:;padding:;font-family:"microsoft yahei";list-style:none;text-decoration:none;
}
.fl{
float:left;
}
.fr{
float:right;
}
.f12{
font-size:12px;
}
.disl{
display:inline-block;
}
.w100{
width:100px;
}
.fw{
font-weight:bold;
}
.goodsList_menu{
width:990px;height:45px;background:#f3f3f3;margin:0 auto;line-height:45px;
font-size:14px;color:#333;border:1px solid #ddd;
}
.goodsList_menu .goodsListfl ul li{
float:left;margin-right:80px;cursor:pointer;
}
.goodsList_menu .goodsListfr ul li{
float:left;margin-right:37px;text-align:center;cursor:pointer;
}
/*内容*/
.goodsList_content{
width:100%;height:80px;border-bottom:1px solid #eee;padding:20px 0;margin-top:40px;
}
.goodsList_content .disl{
line-height:20px;width:300px;cursor:pointer;margin-left:10px;
}
.goodsList_content .disl span:hover{
color:#e4393c;
}
.goodsList_content .disl p:hover{
color:#e4393c;
}
.goodsListnum .listNum{
widows:45px;height:21px;width:50px;border:1px solid #eee;text-align:center;
outline:none;
}
.goodsListnum ul li{
float:left;margin-right:30px;text-align:center;cursor:pointer;
}
.goodsListnum ul li a{
border:1px solid #ddd;padding:2px 7px;color:#000;
}
.goodsListnum ul li p{
line-height:;color:#666;font-size:12px;margin-top:-2px;
}
.buy_goods p{
background:url(../images/arrow.png)no-repeat;padding-left:30px;background-position:-20px -20px;
}
.buy_goods{
position:relative;
}
/*底部结账*/
.checkout{
height:55px;border:1px solid #eee;margin-top:20px;line-height:55px;
}
.checkout .checkoutleft ul li{
float:left;margin-right:10px;cursor:pointer;
}
.checkout .checkoutSum{
font-weight:bold;font-size:18px;color:#e64346;
}
.checkout .checkoutright input{
border:none;color:#fff;outline:none;width:100px;height:55px;line-height:55px;
font-size:20px;background:#e64346;margin-left:50px;cursor:pointer;
}

 
<script>
$.ajax({
type:"get",
url:"jd.json",
dataType:"json",
success:function(data){
var list = data.list;//拿到list数组
//console.log(list);
for(var i=0;i<list.length;i++){
var numArray = list[i];
numArray.price = (numArray.price).toFixed(2);
var text = "<div class='goodsList_content'><div class='fl buy_goods'>"+
"<input class='fl' style='margin:15px 10px 0 10px;' type='checkbox' name='' />"+
"<img align='top' src='images/1.jpg' /><div class='disl'>"+
"<span>"+numArray.description+"</span><p class='f12'>购买礼品服务</p></div>"+
"<div class='disl' style='width:auto;position:absolute;right:-100px;top:0;'>"+
"<span>"+numArray.color+"</span></div></div>"+
"<div class='fr goodsListnum' style='margin-top:-12px;'>"+
"<ul><li><b>¥</b><span class='fw'>"+numArray.price+"</span></li>"+
"<li class='w100'><a class='minus' onClick='minus(this);' href='javascript:void(0);'>-</a>"+
"<input value='1' class='listNum' /><a class='add' onClick='add(this)' href='javascript:void(0);'>+</a><p>有货</p></li>"+
"<li class='w100'><b>¥</b><span id='sub' class='fw'>"+numArray.price*numArray.quentity+"</span></li>"+
"<li><a style='border:none;color:#666;' href='javascript:void(0);'>删除</a></li>"+
"</ul></div></div>"
$(text).appendTo(".goodsListbox"); }
},
error:function(){
console.log("调用数据失败!");
}
}); var listNum,price,sums,sub1,sub2;
function add(obj){
listNum = $(obj).prev().val();//input值
listNum = parseInt(listNum);
var num = parseInt(listNum+1);//input值每次+1
$(obj).prev().val(num); price = $(obj).parent().prev().children('span').text();//找到单价
price = parseInt(price);//转换成number类型
price = price.toFixed(2);
sums = $(obj).parent().next().children('span').text()//找到总金额
sums = parseInt(sums);
console.log(typeof sums);
$(obj).parent().next().children('span').text(price*num); sub1 = $(".goodsList_content:eq(0)").find("#sub").text();
sub2 = $(".goodsList_content:eq(1)").find("#sub").text();
sub1 = parseInt(sub1);
sub2 = parseInt(sub2);
var res = $(".checkoutright .checkoutSum").text((sub1+sub2).toFixed(2));
} function minus(obj){
listNum = $(obj).next().val();
listNum = parseInt(listNum);
if(listNum<=1){
listNum==1;
}else{
--listNum;
}
$(obj).next().val(listNum);
price = $(obj).parent().prev().children('span').text();//找到单价
price = parseInt(price);//转换成number类型
price = price.toFixed(2);
sums = $(obj).parent().next().children('span').text()//找到总金额
sums = parseInt(sums);
$(obj).parent().next().children('span').text(price*listNum);
$(".checkoutright .checkoutSum").text(price*listNum); sub1 = $(".goodsList_content:eq(0)").find("#sub").text();
sub2 = $(".goodsList_content:eq(1)").find("#sub").text();
sub1 = parseInt(sub1);
sub2 = parseInt(sub2);
$(".checkoutright .checkoutSum").text(sub1+sub2);
}
</script>

 

因为时间原因,代码没有进行优化,但是效果还是先给大家呈现出来。希望可以帮到更多的技术爱好者和朋友!

使用Ajax、json实现京东购物车结算界面的数据交互的更多相关文章

  1. 关于AJAX+HTML5+ASHX进行全静态页面的数据交互

    及时总结项目中使用到的知识,知识在于积累. 1.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

    一.ajax  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json  2 ajax干啥用的?前后端做数据交互:  3 之前学的跟后台做交互的方式:   -第一种:在浏览器 ...

  3. 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  4. 【京东账户】——Mysql/PHP/Ajax爬坑之购物车列表显示

    一.引言 做京东账户项目中的购物车模块,功能之二是购物车列表显示.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.小功能-点击“去购物车结算” 小坑:Ajax动态生成的不能直接绑定,因 ...

  5. 京东购物车的 Java 架构实现及原理!

    今天来写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码 问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品,关闭 ...

  6. 京东购物车的Java架构实现及原理!

    今天来写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码 问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品,关闭 ...

  7. DJANGO-天天生鲜项目从0到1-009-购物车-Ajax实现添加至购物车功能

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  8. 初识--Ajax & Json

    1,AJAX是一种进行页面局部异步刷新技术. 用AJAX向服务器发送请求和获得服务器返回的数据并更新到页面中. 不是刷新整个页面,而是在HTML页面中使用JavaScript创建XMLHTTPRequ ...

  9. 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互

    最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...

随机推荐

  1. linux shell脚本编程笔记(一): 构建基本脚本

    1. echo -n str        打印不换行 2. 反引号来圈住命令传入变量 eg: 生成日志文件: #!/bin/bash today=`date +%y%m%d` ls /usr/bin ...

  2. Spark性能优化的10大问题及其解决方案

    Spark性能优化的10大问题及其解决方案 问题1:reduce task数目不合适 解决方式: 需根据实际情况调节默认配置,调整方式是修改参数spark.default.parallelism.通常 ...

  3. java web框架发展的新趋势--跨界轻型App

    “跨界(cross over)在汽车界已然成风,将轿车.SUV.跑车和MPV等多种不同元素融为一体的混搭跨界车型,正在成为汽车设计领域的新趋势.从个人而言,当包容.多元的审美要求和物质要求越来越强烈时 ...

  4. DBArtist之Oracle入门第2步: 了解Oracle的Database Control

    之前安装好数据库后,会有下面这个弹窗,然后根据Database Control URL地址进入瞧一瞧,看一看! 根据地址进入以后,是一个登录界面,用system账户登录,密码就是安装Oracle的时候 ...

  5. 使用python把图片存入数据库-乾颐堂

    一般情况下我们是把图片存储在文件系统中,而只在数据库中存储文件路径的,但是有时候也会有特殊的需求:把图片二进制存入数据库. 今天我们采用的是python+mysql的方式 MYSQL 是支持把图片存入 ...

  6. Python的内建比较函数cmp比较原理剖析-乾颐堂

    cmp( x, y):比较2个对象,前者小于后者返回-1,相等则返回0,大于后者返回1. Python的cmp比较函数比较原理 Python的cmp函数可以比较同类型之间,或者不同数据类型之间.然后根 ...

  7. C#变量初始化

    在C#中声明变量使用下述语法: datatype identifier;, 例如: int i; 该语句声明int变量i.编译器不允许在表达式中使用这个变量,除非用一个值初始化了改变量.如果你不需要使 ...

  8. SQL游标 数据库编程样例

    --处理file与folder中的order -- 声明变量 DECLARE @fileid AS INT, @folderid AS INT, @order AS INT, @oldFolderId ...

  9. mybatis思维导图(一)

    写在前面 与hibernate相比,我无疑更喜欢mybatis,就因为我觉得它真的好用,哈哈.它简单上手和掌握:sql语句和代码分开,方便统一管理和优化:当然缺点也有:sql工作量很大,尤其是字段多. ...

  10. smarty类与对象的赋值与使用

    <?phprequire_once('../smarty/Smarty.class.php'); //配置信息$smarty=new Smarty(); $smarty->left_del ...