jQuery-Ajax(动画，请求json文件，淘宝购物车htm
2016-12-25 本文已影响1039人
范小饭_
jQuery还是比较好操作的，把Ajax说完，再加一点点动画，差不多全部基础的东西都完毕了。
今天圣诞节，没有期待就没有伤害，不矫情了，还是学习充实一下吧~
简单的介绍一下Ajax。
以下文字来自《JavaScript高级程序设计》......
Ajax技术的核心是XMLHttpRequest对象（简称XHL），这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。
在XHL出现之前，Ajax的通信必须借助一下hack手段来实现，大多是使用隐藏的框架或者内嵌框架，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。
能够以异步的方式从服务器取得更多的信息，意味着用户单击后，可以不必刷新页面就获取新数据，也就是说，可以使用Ajax对象获取新数据，然后通过DOM将新数据插入到页面中，另外，虽然名字包含XHL的部分，但Ajax通信与数据格式无关，这种技术就是无需刷新页面即可从服务器取得数据，但不一定是XML数据。
喏给你图
Ajax.png
基本的看流程图
这里只给大家详细说一下jQuery的Ajax的请求公式和参数等。
$.ajax({字面量对象})
$.ajax({
url：请求地址
type:"get | post | put | delete " 默认是get,
data:请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html | text | json | xml | script | jsonp ",
success:function(data,dataTextStatus,jqxhr){ },//请求成功时
error:function(jqxhr,textStatus,error)//请求失败时
})
举个栗子
$.ajax({
url:"tom.php",
type:"get",
dataType:"text",
success:function(data,textStatus,jqxhr){
console.log("__成功__");
console.log(data);
console.log(textStatus);
console.log(jqxhr);
console.log("______");
},
error:function(jqxhr,textStatus,error){
console.log("__失败__");
console.log(error);
console.log(textStatus);
console.log(jqxhr);
console.log("******");
}
})
请求JSON文件
下面我们来尝试请求一个json文件并解析
为了让更好的查看json文件的机构，推荐大家一个软件JSON viewer，只要把文件拖到里面就可以查看json文件的格式和详细信息，给个截图，looklook
城市编码json文件解析图片.PNG
看一下我们的操作结果
城市编码.gif
下面我们来解析一个这个文件，并把它显示在页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市编码查询</title>
</head>
<body>
<select id="pro">
<option>请选择</option>
</select>
<select id="cit">
<option>请选择</option>
</select>
<input type="text" name="" readonly="readonly" id="inp">
<button id="but">查询</button>
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$.ajax({
url:"http://localhost/city.json",
type:"get",
dataType:"json",
success:function(data,textStatus,jqxhr){
//将所有的省份添加到对象的select中，
//并且对应添加option标签，将得到的省份添加到option标签里
for(var i = 0 ; i<data["城市代码"].length;i++){
var $cont = data["城市代码"][i].省;
var $opt = $("<option></option>")
$opt.append($cont);
$("#pro").append($opt);
}
//给省份添加改变事件，将对应的市添加到第二个select标签里，
//并对应创建option标签。创建两个数组，城市和编码两个数组的下标一一对应。
//当我们选择一个城市的时候，得到他的下标，在利用这个下标，再到对应的编码组里查找它的编码。
var $cityname;
var ct=[];
var cn=[];
$("#pro").change(function(){
//每次清除城市标签选项卡
$("#cit").val("<option>请选择</option>");
$("#inp").val("");
var $prev=$(this).val();
for(var j = 0 ;j < data["城市代码"].length;j++){
if (data["城市代码"][j].省== $prev) {
var cityarr=data["城市代码"][j].市;
for(var n = 0 ;n<cityarr.length;n++){
var $opt = $("<option></option>");
$cityname = cityarr[n]["市名"];
ct.push($cityname);
cn.push(cityarr[n]["编码"]);
$opt.append($cityname);
$("#cit").append($opt);
}
}
}
})
//点击事件查询城市编码，并将对应的城市编码显示在页面上。
$("#but").click(function(){
for(var y = 0 ; y < ct.length; y++){
if(ct[y]==$("#cit").val()){
//console.log(y) 得到下标
$("#inp").val(cn[y]);
}
}
})
},
error:function(jqxhr,textStatus,error){
console.log("请求失败");}
})
</script>
</body>
</html>
介绍完Ajax，我们的jQuery基本完毕，后续只剩不断的练习。给大家放一个逻辑思维相对来说比较高的淘宝购物车的jQuery制作。
看操作结果
购物车.gif
要求
1.点击全选的时候，下列商品的每一项都被选中，对应的总价钱和总积分变化；
2.每一项商品都选中的时候，全选的按钮也被选，中，只要有一项商品没有被选中全选都不可以被选，对应的总价钱和总积分变化；
3.点击加号或者减号，对应的商品的数量、价格、积分、变化；对应的总价钱和总积分变化；
4.点击删除按钮，对应的商品被删除，对应的总价钱和总积分变化；
5.点击删除所选按钮，当前被选中的商品都被删除，对应的总价钱和总积分变化；
具体代码如下：
<!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>
<link href="css/myCart.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> > <a href="#">我的淘宝</a> > 我的购物车</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看购物车</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 确认订单信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付宝</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 确认收货</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 评价</li>
<li class="navlist_gray_right"></li>
</ul>
</div>
<div id="content">
<form action="" method="post" name="myform">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<tr>
<td class="title_1"><input id="allCheckBox" type="checkbox" value=""/>全选</td>
<td class="title_2" colspan="2">店铺宝贝</td>
<td class="title_3">获积分</td>
<td class="title_4">单价（元）</td>
<td class="title_5">数量</td>
<td class="title_6">小计（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a> 卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product1">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
颜色：棕色 尺码：37<br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a> 卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product2">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td>
<td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">265.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_2" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a> 卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product3">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
<td class="cart_td_4">3</td>
<td class="cart_td_5">85.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a> 卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product4">
<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"/></td>
<td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
<td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
<td class="cart_td_4">12</td>
<td class="cart_td_5">12.00</td>
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_4" type="text" value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td colspan="3"><a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
可获积分 <label class="yellow" id="integral"></label> 点<br />
<input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
</tr>
</table>
</form>
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
//初始状态
$(".cart_td_7").each(function(){
$(this).html($(this).prev().prev().html());
})
//点击加号
var Cindex;
$(".hand:odd").on("click",function(){
num = parseInt($(this).prev().val())+1;//对应的数量加1
$(this).prev().val(num);//得到的数字添加到页面上
var price = num*($(this).parent().prev().html())+".00";//算出单件商品的价格
$(this).parent().next().html(price); //把计算的出的价格放到小计里
//获取积分
var integral = parseInt($(this).parents("tr").find(".cart_td_4").html());
//积分的总数等于单价积分乘以数量
$(this).parents("tr").find(".cart_td_4").html((integral*num)/(num-1))
//加号对应的checked选中
$(this).parents('tr').children().eq(0).children().prop("checked",true);
;
Cindex=0;//记录被选中的checked的个数
for(var m = 0 ;m<$(".cart_td_1").length;m++){
if ($(".cart_td_1 input")[m].checked){
Cindex++; //每当有一个被选中，被选中的下标的个数加1
//当全部被选中的时候，全选的checked被选中
if(Cindex==$(".cart_td_1").length){
$("#allCheckBox").prop("checked",true);
}
}
}
totalMoney()
})
//点击减号
$(".hand:even").on("click",function(){
num = parseInt($(this).next().val())-1; //对应的数量减1
//获取到积分
var integral = parseInt($(this).parents("tr").find(".cart_td_4").html());
var price = num*($(this).parent().prev().html())+".00";//算出单件商品的价格
$(this).parent().next().html(price);//把计算的出的价格放到小计
//减号对应的checked选中
$(this).parents('tr').children().eq(0).children().prop("checked",true);
//积分的总数等于单价积分乘以数量
$(this).parents("tr").find(".cart_td_4").html((integral/(num+1))*num)
//当商品的个数减到0时，不能在进行减少
if (num==0) {
$(this).parents("tr").find(".cart_td_4").html((integral));
var jQ = $(this).parents("tr").find(".cart_td_5").html();
console.log(jQ)
$(this).parent().next().html(jQ);
alert("亲,不能少于一件商品哦~");
num=1;
}
$(this).next().val(num); //得到的数字添加到数量上面
totalMoney(); //点击减号时计算总计
})
//点击删除
$(".cart_td_8>a").on("click",function(){
//虽然display也能在页面上显示元素被删除，但实际上元素并没有被删除
$(this).parents("tr").prev().remove();
$(this).parents("tr").remove();
totalMoney(); //删除后计算总计
})
//点击全选
$("#allCheckBox").on("click",function(){
//点击全选，全部选中或者全部不选
if (this.checked) {
$(":checkbox").prop("checked",true);
}else{
$(":checkbox").prop("checked",false);
}
totalMoney(); //点击全选后计算总计
})
//点击单选
var index;
var unit;
var number;
$(".cart_td_1 input").on("click",function(){
//当这个被选中的时候进行如下判断
if (this.checked) {
index=0;//进行循环，当全部的checked被选中的时候全选的被选中
for(var m = 0 ;m<$(".cart_td_1").length;m++){
if ($(".cart_td_1 input")[m].checked){
index++;
if(index==$(".cart_td_1").length){
$("#allCheckBox").prop("checked",true);
}
}
}
}else{
$("#allCheckBox").prop("checked",false);
}
totalMoney();//计算总价和总积分
})
//删除所选
$("#deleteAll").click(function(){
$(".cart_td_1 input").each(function(){
if (this.checked) {
$(this).parents("tr").prev().remove();
$(this).parents("tr").remove();
}
})
totalMoney();
})
//总计的计算
var mm = 0;
var sum=0;
function totalMoney(){
mm=0;//记录每一个价格
sum=0;//计算价格和
mmF=0;//计算每一个积分
sumF=0;//计算积分的和
$(".cart_td_1>input").each(function(){
if (this.checked){
mm=parseInt($(this).parents("tr").find(".cart_td_7").html());
sum=sum+mm;//总价
mmF=parseInt($(this).parents("tr").find(".cart_td_4").html());
sumF=sumF+mmF;//总积分
}
})
$("#total").html(sum);
$("#integral").html(sumF)
}
</script>
</div>
</body>
</html>
累了么。给你个笑话看看，看看你是否点菜的时候也这样~
程序员A: “我吃鱼香肉丝盖饭, 你吃什么?”
程序员B: “宫保鸡丁盖饭.”
程序员A 在点菜单写上：
鱼香肉丝盖饭 1
宫保鸡丁盖饭 1
程序员B: “我还是要牛肉面吧!”
程序员A 更正点菜单:
鱼香肉丝盖饭 1
// 宫保鸡丁盖饭 1
牛肉面 1
看懂了没？哈哈，今天是圣诞节，祝大家节日快乐~
任何时候不要吝啬你的赞美，喜欢就点赞互粉咯~
