一、Ajax获取数据
1.Ajax
HTML: Hyper-Text Markup Language 。
XML: eXtensible Markup Language 。
XML最为重要的用途是在两个异构的系统之间交换数据 。
现在这项功能基本上被JSON和YAML格式替代了 。
Ajax: Asynchronous JavaScript and XML 。
通过JavaScript代码向服务器发起异步请求并获得数据 。
异步请求：在不中断用户体验的前提下向服务器发出请求 。
获得数据后可以通过DOM操作对页面进行局部刷新加载服务器返回的数据。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax获取数据</title>
</head>
<body>
<button id="ok">换一组</button>
<div id="container"></div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#ok').on('click',function(){
var url = 'http://api.tianapi.com/meinv/?key=b8a234b84684732e96dd79e512b685f8&num=10';
$.getJSON(url, function(jsonObj){
$('#container').empty();
$.each(jsonObj.newslist, function(index,elem) {
$('#container').append(
$('<img>').attr('width','400').attr('height','550').attr('src',elem.picUrl)
);
});
});
});
});
</script>
</body>
</html>
2.周公解梦
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>周公解梦</title>
<style type="text/css">
#search{
width: 740px;
margin: 0 auto;
text-align: center;
margin-top: 150px;
}
#keyWord{
display: inline-block;
width: 520px;
height: 36px;
font: 36px/36px arial;
text-align: center;
vertical-align: middle;
border: none;
outline: none;
border-bottom: 1px dotted darkgray;
}
/*#search input[type=button] -> 属性选择器*/
#button1{
width: 80px;
height: 36px;
font:20px/36px arial;
border: none;
color: white;
background-color: green;
vertical-align: middle;
}
#result{
width: 640px;
margin: 0 auto;
font: 20px/20px arial;
}
</style>
</head>
<body>
<div id="search">
<input type="text" id="keyWord" value="" placeholder="请输入关键字"/>
<input type="button" id="button1" value="查询" />
</div>
<hr>
<p id="result"></p>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//将URL不能识别的字符转化成能够识别的%编码
//encodeURIComponent(str,'utf-8');
//将%编码的数据转化成普通的字符
//decodeURIComponent(str,'utf-8');
$(function(){
$('#button1').on('click',function(){
var keyWords = $('#keyWord').val().trim();
if(keyWords.length > 0){
$('#result').empty();
$.ajax({
'url': 'http://api.tianapi.com/txapi/dream/',
'type': 'get',
'data': {
'key': 'b8a234b84684732e96dd79e512b685f8',
'word': keyWords
},
'dataType': 'json',
'success': function(jsonObj){
if(jsonObj.code == '250'){
$('#result').text(jsonObj.msg);
}else{
$('#result').text(jsonObj.newslist[0].result);
}
}
});
}
});
});
</script>
</body>
</html>
测试结果
1.PNG
3.购物车
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 20px auto;
}
#cart {
margin: 0 auto;
width: 850px;
}
#cart-header {
height: 40px;
background-color: lightgray;
margin-bottom: 20px;
}
#cart-header div {
line-height: 40px;
}
.left {
float: left;
}
.right {
float: right;
}
.w110 {
width: 100px;
}
.ml10 {
margin-left: 10px;
}
.w120 {
width: 120px;
}
.w250 {
width: 250px;
}
.center {
text-align: center;
}
.w20 {
width: 20px;
}
.w90 {
width: 90px;
}
.clear {
clear: both;
}
#cart-items>div {
height: 100px;
}
#cart-items>div>div {
line-height: 100px;
}
.w250 span {
display: inline-block;
font-size: 12px;
line-height: 16px !important;
}
.single-item {
border-bottom: 1px solid gray;
}
.small-button {
display: inline-block;
width: 20px;
height: 20px;
border: none;
}
.big-button {
color: white;
background-color: red;
display: inline-block;
width: 120px;
height: 40px;
border: none;
font-size: 22px;
}
#totalCount, #totalPrice {
color: red;
}
#totalPrice {
font: bolder 20px Arial;
display: inline-block;
width: 150px;
}
#cart a {
text-decoration: none;
}
#cart a:link, #cart a:visited, #cart a:active {
color: gray;
}
</style>
</head>
<body>
<div id="cart">
<div id="cart-header">
<div class="left w110 ml10">
<input id="selectAll" type="checkbox" >
<label for="selectAll">全选</label>
</div>
<div class="left w250">商品</div>
<div class="left w120 center">单价</div>
<div class="left w120 center">数量</div>
<div class="left w120 center">小计</div>
<div class="left w120 center">操作</div>
</div>
<div id="cart-items">
<div class="clearSingle-item">
<div class="left w20 ml10">
<input class="selectOne" name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a1.jpg">
</a>
</div>
<div class="left w250">
<span>
海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
</span>
</div>
<div class="left w120 center">¥<span id="price1" class="price">138.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input id="input1" class="center-count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥<span>138.00</span></div>
<div class="left w120 center">
<a class="del" href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input class="selectOne" name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a2.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
</span>
</div>
<div class="left w120 center">¥<span id="price2" class="price">128.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input id="input2" class="center-count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥<span>128.00</span></div>
<div class="left w120 center">
<a class="del" href="javascript:void(0);">删除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input class="selectOne" name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a3.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
</span>
</div>
<div class="left w120 center">¥<span id="price3" class="price">99.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input id="input3" class="center-count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥99.00</div>
<div class="left w120 center">
<a class="del" href="javascript:void(0);">删除</a>
</div>
</div>
</div>
<div id="cart-footer">
<div class="clear left">
<a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
</div>
<div class="right">
<span>总共选中了<span id="totalCount">0</span>件商品</span>
<span>总计: <span id="totalPrice">¥<span id="price">0.00</span></span>
<button id="pay" class="big-button">去结算</button>
</div>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//全选功能
var checkBoxs = $('.selectOne');
$.each(checkBoxs, function(index,elem1) {
$(elem1).on('click',function(){
$.each(checkBoxs, function(index,elem2) {
if($(elem2).is(':checked') == false){
$('#selectAll').prop({
'checked' : false
});
return false
}
$('#selectAll').prop({
'checked' : true
});
});
});
});
$.each(checkBoxs, function(index,elem) {
if($(elem).is(':checked') == false){
$('#selectAll').prop({
'checked' : false
});
}else{
$('#selectAll').prop({
'checked' : true
});
}
});
$('#selectAll').on('click',function(){
var allTag = ($('#selectAll').is(':checked'));
if(allTag){
$.each(checkBoxs, function(index,elem) {
$(elem).prop({
'checked' : true
});
});
}else{
$.each(checkBoxs, function(index,elem) {
$(elem).prop({
'checked' : false
});
});
}
});
});
//商品件数和总计
$('#input1').bind('input propertychange',function(evt){
if($('#input1').val() > 200){
$('#input1').val(200);
}else if($('#input1').val() <= 0){
$('#input1').val(0);
}
});
$("#input2").bind("input propertychange",function(evt){
if($('#input1').val() > 200){
$('#input1').val(200);
}else if($('#input1').val() <= 0){
$('#input1').val(0);
}
});
$("#input3").bind("input propertychange",function(evt){
if($('#input1').val() > 200){
$('#input1').val(200);
}else if($('#input1').val() <= 0){
$('#input1').val(0);
}
});
$('.small-button').on('click',function(evt){
var num = parseInt($(evt.target).parent().children('input').val());
if($(evt.target).text() == '+'){
if(num >= 200){
$(evt.target).parent().children('input').val(200);
}else{
$(evt.target).parent().children('input').val(num+1);
}
}else{
if(num<=0){
$(evt.target).parent().children('input').val(0);
}else{
$(evt.target).parent().children('input').val(num-1);
}
}
});
$('.selectOne').on('click',function(evt){
var input = $(evt.target).parent().parent().find('input')[1];
var price = $(evt.target).parent().parent().find('.price');
if($(evt.target).is(':checked') == true){
var total = parseInt($('#totalCount').text()) + parseInt($(input).val())
var totalPrice = parseFloat($('#price').text()) + parseInt($(input).val()) * parseFloat($(price).text());
$('#price').text(totalPrice);
$('#totalCount').text(total);
}else{
var total = parseInt($('#totalCount').text()) - parseInt($(input).val())
var totalPrice = parseFloat($('#price').text()) - parseInt($(input).val()) * parseFloat($(price).text());
$('#price').text(totalPrice);
$('#totalCount').text(total);
}
});
$('#selectAll').on('click',function(evt){
var total = 0;
totalPrice = 0;
var price = $(evt.target).parent().parent().find('.price');
if($(evt.target).is(':checked') == true){
$.each($('.center-count'),function(index,elem){
total = total + parseInt($(elem).val());
totalPrice = $('#input1').val() * parseFloat($('#price1').text()) + $('#input2').val() * parseFloat($('#price2').text()) + $('#input3').val() * parseFloat($('#price3').text());
});
$('#totalCount').text(total);
$('#price').text(totalPrice);
}else{
$('#totalCount').text(0);
$('#price').text(0.00);
}
});
//删除选中商品
$('#clearSelected').on('click',function(){
$.each($('.selectOne'),function(index,elem){
if($(elem).is(':checked') == true){
var totalPrice = parseFloat($('#price').text()) - $(elem).parent().parent().find('.center-count').val() * $(elem).parent().parent().find('.price').text();
var totalCount = $('#totalCount').text() - $(elem).parent().parent().find('.center-count').val();
$('#totalCount').text(totalCount);
$('#price').text(totalPrice);
$(elem).parent().parent().remove()
}
})
});
//删除整行
$('.del').on('click',function(evt){
var flag = window.confirm('确定要删除该商品吗？');
if(flag){
$(evt.target).parent().parent().remove();
}
});
</script>
</body>
</html>
测试结果
2.PNG
