JQuery中ajax的简单使⽤教程（附带实例代码）
当接触⼀项新技术时，⾸先我们要问⾃⼰四个问题，如果这四个问题我们都能学习并理解到位，那么可以说这个新技术你已经完成了初步掌握，下⾯我们就这四个问题来说ajax应该怎么学习。如果你已经看过我写的JS中ajax的使⽤教程，相信你对ajax已经有了⼀个基础了解。那么可以直接看第四部分，以便节约您的时间。
⼀，ajax是什么？
AJAX = 异步 JavaScript 和 XML。是⼀种⽤于创建快速动态⽹页的技术。通过在后台与服务器进⾏少量数据交换，AJAX 可以使⽹页实现异步更新。这意味着可以在不重新加载整个⽹页的情况下，对⽹页的某部分进⾏更新。传统的⽹页（不使⽤AJAX）如果需要更新内容，必需重载整个⽹页⾯。有很多使⽤ AJAX 的应⽤程序案例：新浪微博、Google 地图、开⼼⽹等等。
⼆，ajax⽤在哪⾥？
简单说是需要连接数据库的地⽅，但是连接数据库传输的信息量很少，⽤不着刷新整个页⾯，这种类型的适合⽤ajax，避免了属性整个页⾯带来的资源浪费。
三，为什么要使⽤ajax？
减轻服务器的负担，按需取数，可以最⼤程度的减少冗余请求和响应对服务造成的负担。⽆恻新更新页⾯，减少⽤户⼼理和实际的等待时间。带来更好的⽤户体验。可以把以前⼀些服务器负担的⼯作转嫁到客户端，利⽤客户端闲置的能⼒来处理，减轻服务器和速写的负担，节约空间和宽带租⽤成本。可以调⽤外部数据。基于标准化的并被⼴泛⽀持的技术，不需要下载插件或者⼩程序。进⼀步促进页⾯呈现和数据的分离。
四，怎么使⽤在JS中使⽤ajax？使⽤时我们要了解的基础知识
1，JQuery是什么东西？
是⼀个JavaScript类库，封装了⼤量的JavaScript底层代码。
2，JQuery的Ajax操作，对JavaScript底层Ajax操作进⾏了封装，提供了两种⽅法进⾏操作
第⼀种是底层的$.ajax()操作
$.ajax({
url:"url",
type:"get",
dataType:"json",
data:{
userID:"1"
},
success:function(response){
},
error:function() {
}
});
第⼆种是快捷操作$.get()..$.post()...
$.get(
"url",
{userID:"123"},
function(response) {
}
)
$.post(
"url",
{userID:"123"},
function(response) {
}
)
简单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="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;
jquery学习在线教程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>
<h1>衬衫<small>众多品牌齐聚，商务休闲⾸选</small></h1>
</div>
</div>
</div>
<script>
$(function() {
/* 加载热销商品列表页*/
$.ajax({
url:"datainfo.duapp/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:"datainfo.duapp/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($name);
$caption.append($id);
$thumbnail.append($img);
$thumbnail.append($caption);
$goodsBox.append($thumbnail) $(".shirt").append($goodsBox); }
}
});
})
</script>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论