开发者学堂课程【Ajax 前端开发入门与实战：jQuery 的使用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8539
jQuery 的使用
jQuery 中使用 a.jax
jQuery：是一个 JavaScript 类库，封装了大量的 JavaScript 底层代码。
对于 jQuery 中关于 ajax 的封装，它提供了很多方法供开发者进行调用。这些封装都是基于一个方法的基础上进行的修改。这个方法就是 $.ajax() 。
三个常用方法
1.$.ajax()
2.$.get()
3.$.post()
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
$.ajax() 的使用和 myAjax2 使用起来非常类似，同样是传入一个对象，有些参数不传递的话，也具有默认值，思想和实现过程与 myAjax2 如出一辙。
$.ajax( {
url: url,
data: {},
success: function(result){},
dataType: " json"});
jQuery 中对于网络请求，还有其他一些方法，但是本质上都是对 XMLHttpRequest, 的封装。
如:$.get() 和 $.post();
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<linkrel="stylesheet" href="js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="js/lib/jquery2.2.4/jquery-2.2.4.js"></script>
<script src="js/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.thumbnail{
max-height:350px;
height:330px;
overflow:hidden;
}
.thumbnail > img{
width:140px;height:140px;
}
</style>
</head>
<body>
<div class="container">
<div class="row hotgoodslist">
<div class="page-header">
<h1>热销商品<small>年度热销商品排行榜</small></h1>
</div>
<!--<div class="col-sm-4 col-md-3">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>￥<span>400</span></h3>
<p>商品名称</p>
<p>
<a href="#" class="btn btn-danger" role="button">加入购物车</a>
<a href="#" class="btn btn-primary" role="button">立即购买</a>
</p>
</div>
</div>
</div>-->
</div>
<div class="row shirt">
<div class="page-header">
<h1>衬衫<small>众多品牌齐聚，商务休闲首选</small></h1>
</div>
</div>
</div>
<script>
$(function() {
/* 加载热销商品列表页*/
$.ajax({
url:"http://datainfo.duapp.com/shopdata/getGoods.php?callback=?",
type:"get",
dataType:"jsonp",
success:function(resp) {
console.log(resp);
for(var i = 0; i < resp.length; i ++) {
// DOM 操作添加商品
var $goodsBox = $("<div>").addClass("col-md-3").addClass("col-sm-4");
var $thumbnail = $("<div>").addClass("thumbnail");
var $img = $("<img>").attr("src", resp[i].goodsListImg);
var $caption = $("<div>").addClass("caption");
var $priceSpan = $("<span>").text(resp[i].price);
var $price = $("<h3>").text("￥").append($priceSpan);
var $name = $("<p>").text(resp[i].goodsName);
var $id = $("<p>").text(resp[i].goodsID).css("visible", "hidden");
var $addCart = $("<button>").addClass("btn").addClass("btn-danger").text("加入购物车");
var $buyNow = $("<button>").addClass("btn").addClass("btn-primary").text("立即购买");
$caption.append($price);
$caption.append($name);
$caption.append($id);
$thumbnail.append($img);
$thumbnail.append($caption);
$thumbnail.append($addCart);
$thumbnail.append($buyNow);
$goodsBox.append($thumbnail)
$(".hotgoodslist").append($goodsBox);
}
}
});
/*
加载衬衫商品列表页
*/
$.ajax({
url:"http://datainfo.duapp.com/shopdata/getGoods.php?callback=?",
type:"get",
data:{
classID:1
},
dataType:"jsonp",
success:function(resp) {
console.log(resp);
for(var i = 0; i < resp.length; i ++) {
// DOM 操作添加商品
var $goodsBox = $("<div>").addClass("col-md-3").addClass("col-sm-4");
var $thumbnail = $("<div>").addClass("thumbnail");
var $img = $("<img>").attr("src", resp[i].goodsListImg);
var $caption = $("<div>").addClass("caption");
var $priceSpan = $("<span>").text(resp[i].price);
var $price = $("<h3>").append($priceSpan);
var $name = $("<p>").text(resp[i].goodsName);
var $id = $("<p>").text(resp[i].goodsID).css("visible", "hidden");
$caption.append($price);
$caption.append($name);
$caption.append($id);
$thumbnail.append($img);
$thumbnail.append($caption);
$goodsBox.append($thumbnail)
$(".shirt").append($goodsBox);
}
}
});
})
</script>
</body>
</html>
进入界面呈如下界面：
async
类型:Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
data
类型: string
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后·查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称·如{foo:["bar1" , "bar2"]}转换为"&foo=bar18foo=bar2"。
$.get(url+" ?"+params,function( result){
console.log(result);
});
