京东ajax怎么用,使用Ajax、json实现京东购物车结算界面的数据交互实例

  • 全选
  • 商品
  • 单价
  • 数量
  • 小计
  • 操作
  • 全选
  • 删除选中产品

总价:0

body,html,ul,li,a{

margin:0;padding:0;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:0;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;

}

$.ajax({

type:"get",

url:"jd.json",

dataType:"json",

success:function(data){

var list = data.list;//拿到list数组

//console.log(list);

for(var i=0;i

var numArray = list[i];

numArray.price = (numArray.price).toFixed(2);

var text = "

"+

""+

"1.jpg

"+

""+numArray.description+"

购买礼品服务

"+

"

"+

""+numArray.color+"

"+

"

"+

"

  • "+numArray.price+""+

"

-"+

"+

有货

"+

"

"+numArray.price*numArray.quentity+""+

"

删除"+

"

"

$(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);

}

因为时间原因,代码没有进行优化,但是效果还是先给大家呈现出来。希望可以帮到更多的技术爱好者和朋友!如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持! ad51e517755f8fd6a7ec83ced4ecfaf3.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/538077.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

maven私有库搭建

为什么要搭建maven私有库&#xff1f; 有位博主在2008年时这样写道&#xff1a; 如果没有私服&#xff0c;我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地&#xff0c;而一个团队中的所有人都重复的从maven仓库下载构件无疑加大了仓库的负载和浪费…

eclipse maven访问maven私有库

1、Windows本地maven下载 https://maven.apache.org/download.cgi 2、maven setting 文件配置 进入maven 目录下 conf。apache-maven-3.2.3\conf 新建.xml 文件&#xff0c;内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?><set…

入门系列之在Ubuntu 16.04使用Buildbot建立持续集成系统

欢迎大家前往腾讯云社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 本文由angel_郁发表于云社区专栏 介绍 Buildbot是一个基于Python的持续集成系统&#xff0c;用于自动化软件构建&#xff0c;测试和发布过程。 在本教程中&#xff0c;我们将演示如何设置持续集成系统以自动…

strapi 开源api 内容管理平台试用

strapi 是一个开源的api && 内容管理平台&#xff0c;功能操作起来还是比较方便简单的。 安装 使用docker && docker-compose 代码clonegit clone https://github.com/strapi/strapi-docker && cd strapi-docker 启动 docker-compose up -d 访问 首次初…

1.android体系结构介绍

一、Android的介绍 android介绍见百度百科&#xff1a;Android的介绍&#xff0c;度娘把Android介绍的这么清楚&#xff0c;如果谷歌是Android的爹&#xff0c;那度娘就是娘了。 二、Android的架构图 android系统主要分四层&#xff1a; 从上致下&#xff1a; 1、应用层 2、…

2.JVM和DVM之间的区别

1、JVM .java----->.class----->.jar 运行在内存的 栈 栈虚拟机 2、DVM .java----->.class------>.dex-----(加上其它资源文件)---->apk 运行在CPU的 寄存器 寄存器虚拟机 ---------------------------------------------------------- 3、DVM与JVM的区…

Node.js模块以及模块加载机制

2019独角兽企业重金招聘Python工程师标准>>> Node.js中的模块 在Node.js中&#xff0c;以模块为单位划分功能&#xff0c;通过一个完整的模块加载机制使得开发人员可以将应用程序划分为多个不同的部分。模块的使用可以提高代码重用率&#xff0c;提高应用程序的开发…

获取数据库名称dbName

2019独角兽企业重金招聘Python工程师标准>>> Autowired DataSource ds; connection ds.getConnection(); tring dbName connection.getCatalog(); connection.close(); 转载于:https://my.oschina.net/u/2351011/blog/1925838

mysql连接idea详细教程_idea配置连接数据库的超详细步骤

学习时&#xff0c;使用IDEA的时候&#xff0c;需要连接Database&#xff0c;连接时遇到了一些小问题&#xff0c;下面记录一下操作流程以及遇到的问题的解决方法。一、 连接操作简介&#xff1a;介绍如何创建连接&#xff0c;具体连接某个数据库的操作流程。1.1 创建连接打开i…

redis单节点安装

1、下载 redis &#xff1a;https://redis.io/ redis 提供的是 源码包&#xff0c;需要编译。 2、Linux下安装gcc 和 tcl tcl介绍 命令&#xff1a;yum install gcc tcl 3、将redis的源码包&#xff0c;放到 /usr/local/src 下 tar -zxvf redis-4.0.6.tar.gz 4、安装redi…

ManicTime软件破解

这款软件用来记录电脑上程序的运行时间。方便天天用电脑的查看&#xff1a;今天我的时间都去哪儿了&#xff1f; 专业版不免费&#xff0c;而且需要 67 美元。 免费版和专业版的区别 破解补丁和官方软件下载&#xff08;截止博文发布&#xff0c;官方最新版本 版本&#xff1…

mysql根据ID的顺序查找_求救:mysql 如何根据给定的 ID顺序查找结果?

各位大神&#xff0c;现在我遇到了一个难题需要你们的帮助。有下面两个表post表&#xff1a;文章表。record表:记录表&#xff0c;用于记录用户阅读顺序。record表 根据用户的阅读文章顺序用一个字段 postid 记录 post 表的主键ID&#xff0c;既 record.postid 的外键为 post.i…

python入坑指南_Rust入坑指南:万物初始

有没有同学记得我们一起挖了多少个坑&#xff1f;嗯…其实我自己也不记得了&#xff0c;今天我们再来挖一个特殊的坑&#xff0c;这个坑可以说是挖到根源了——元编程。元编程是编程领域的一个重要概念&#xff0c;它允许程序将代码作为数据&#xff0c;在运行时对代码进行修改…

maven引用公共包_使用github作为maven仓库存放发布自己的jar包依赖 实现多个项目公共部分代码的集中,避免团队中多个项目之间代码的复制粘贴...

使用github作为maven仓库存放发布自己的jar包依赖 实现多个项目公共部分代码的集中&#xff0c;避免团队中多个项目之间代码的复制粘贴。1、首先在本地maven位置的配置文件setting.xml(没有该文件就新建这个文件)中&#xff0c;添加配置maven仓库的地址。我用的是我的GitHub仓库…

WPF之鼠标滑动切换图片

原文:WPF之鼠标滑动切换图片在网上找了一会儿也没找到我想要的效果&#xff0c;还是自己动手&#xff0c;丰衣足食吧。 需求&#xff1a;当前面板中只显示一张图片&#xff0c;图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球&#xff0c;并且点击下部栏内的圆球可以…

mysql in 子查询优化_mysql in 子查询 容易优化

mysql in 子查询 简单优化 大数量下&#xff0c;不要使用 in 嵌套子查询&#xff0c;性能很差&#xff0c;很容易卡死。 ? 简单调整方式如下&#xff1a; select uid,nick_name from uc_users where uid in(select fid from uc_follow where uid#uid#) ? 可拆解成&#xff1a…

谷歌浏览器插件入门示例

2019独角兽企业重金招聘Python工程师标准>>> 实现&#xff1a;任何网址实现图片下载和获取当前域名的cookies的json字符串。 图片下载是给小白用的&#xff0c;可以选中批量下载&#xff0c;获取cookies 是为了方便程序员调试用。 获取cookies: git地址&#xff1a;…

Fiddler中response乱码的解决方案

原文连接&#xff1a;http://blog.csdn.net/quiet_girl/article/details/50577828 ---------------------------------------------------------- 有时候我们看到Response中的HTML是乱码的&#xff0c; 这是因为HTML被压缩了&#xff0c; 我们可以通过两种方法去解压缩。 解决…

线程带来的风险

线程安全性问题 多线程环境下 多个线程共享一个资源对资源进行非原子性操作。 以上三者都存在就会发生线程安全性问题 如文中的卖火车票问题&#xff1a;http://blog.csdn.net/zengmingen/article/details/53217229 原因是&#xff1a;一行java代码转成.class字节码文件后是…

vue内引入语音播报功能

为什么80%的码农都做不了架构师&#xff1f;>>> 在vue项目中引入语音播报&#xff0c;使用的科大讯飞语音接入&#xff0c; 具体思路为每次接收到语音信息后存入一个数组&#xff0c;然后监听这个数组&#xff0c;开始冲第一个索引播放&#xff0c;并且同时根据vue…