Ajax+分页整体使用样例
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="<%=path%>/Ui/js/js/css/pagination.css">
<script src="<%=path %>/Ui/js/js/js/pagination.js"></script>
<script src="<%=path %>/Ui/js/js/jquery.js"></script>
<script src="<%=path %>/Ui/js/js/jquery-1.8.2.min.js"></script>
</head>
<body>
<script type="text/html" id="temp1">
<tr>
<td>
<!-- 注意这个模板的 多选后面必须加一个label，for中的值对应 checkbox的id值 否则不能选择 -->
<input type="checkbox" class="d_none" name="checkbox_{{collect_id}}"
id="checkbox_checkbox_{{collect_id}}"><label for="checkbox_checkbox_{{collect_id}}"> </label>
</td>
<td style="display: none" id="collectid">{{collect_id}}</td>
<td style="display: none" id="goodsid">{{goods_id}}</td>
<td><img src="<%=path %>/{{goods_img}}" width="110" alt=""></td>
<td>
<a href="<%=path %>/showgoodsbyid.do?goods_id={{goods_id}}"
class="fw_medium d_inline_b f_size_ex_large color_dark m_bottom_5">{{goods_title}}</a>
</td>
<td>
<div class="clearfix quantity r_corners d_inline_middle f_size_medium color_dark m_bottom_10">
<button class="bg_tr d_block f_left" id="down" onclick="down1()">-</button>
<input type="text" name="num" readonly value="1" class="f_left" id="num" data-options="min:0,max:200">
<button class="bg_tr d_block f_left" id="up" onclick="up1()">+</button>
</div>
</td>
<td>
￥<span class="scheme_color fw_medium f_size_large" id="price">{{goods_price}}</span>元
</td>
<!--add or remove buttons-->
<td>
<a id="goumai" class="color_dark" onclick="goumai()">购买</a> /
<a href="<%=path %>/deletecollect.do?collect_id={{collect_id}}&pageNum={{pageNum}}&user_id={{user_id}}"
class="color_dark"> 删除</a>
</td>
</tr>
</script>
<jsp:include page="head.jsp"></jsp:include>
<div class="page_content_offset">
<div class="container">
<div class="row clearfix">
<section class="col-lg-9 col-md-9 col-sm-9 m_xs_bottom_30">
<h2 style="font-family:'华文彩云'" class="tt_uppercase color_dark m_bottom_20"> 美食收藏栏</h2>
<hr class="m_bottom_30 divider_type_3">
<table class="table_type_2 responsive_table full_width t_align_l r_corners wraper shadow bg_light_color_1 m_bottom_30">
<thead>
<tr class="f_size_large">
<th>选择</th>
<th>图片</th>
<th>名字/类别</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="trn">
</tbody>
</table>
<p style="float:right;margin-top:-25px">
<button class="button_type_4 bg_scheme_color r_corners tr_all_hover color_light mw_0 m_bottom_15 m_sm_bottom_0 d_sm_inline_middle">
购买选中项
</button>
</p>
<br/>
<hr class="divider_type_3 m_bottom_15">
<%--分页--%>
<div id="pages">
</div>
</section>
<aside class="col-lg-3 col-md-3 col-sm-3">
<figure class="widget shadow r_corners wrapper m_bottom_30">
<figcaption>
<h3 class="color_light">分类</h3>
</figcaption>
<div class="widget_content">
<ul class="categories_list">
<li><a href="#"
class="f_size_large color_dark d_block relative"> <b>蛋糕系列</b>
<span
class="bg_light_color_1 r_corners f_right color_dark talign_c"></span>
</a>
<ul class="d_none">
<li><a href="" class="d_block f_size_large color_dark">
经典系列
</a></li>
<li><a href="" class="d_block f_size_large color_dark">
法式系列
</a></li>
<li><a href="" class="d_block f_size_large color_dark">
儿童系列
</a></li>
<li><a href="" class="d_block f_size_large color_dark">
冰淇淋系列
</a></li>
<li><a href="" class="d_block f_size_large color_dark">
明星产品
</a></li>
</ul>
</li>
</ul>
</div>
</figure>
<figure class="widget shadow r_corners wrapper m_bottom_30">
<figcaption>
<h3 class="color_light">热销产品</h3>
</figcaption>
<div class="widget_content">
<div class="clearfix m_bottom_15">
<a href="#"><img
src="<%=path%>/Ui/images/bestsellers_img_1.jpg" alt=""
class="f_left m_right_15 m_sm_bottom_10 f_sm_none f_xs_left m_xs_bottom_0"></a>
<a style="font-size:12px"
href="#"
class="color_dark d_block bt_link">松塔蜜兰诺</a>
<p class="scheme_color">$19.90</p>
<br/>
<p class="scheme_color">销量：12658</p>
</div>
<hr class="m_bottom_15">
<div class="clearfix m_bottom_15">
<a href="#"><img
src="<%=path%>/Ui/images/bestsellers_img_2.jpg" alt=""
class="f_left m_right_15 m_sm_bottom_10 f_sm_none f_xs_left m_xs_bottom_0"></a>
<a style="font-size:12px"
href="#"
class="color_dark d_block bt_link">百味榴莲干</a>
<p class="scheme_color">$25.90</p>
<br/>
<p class="scheme_color">销量：17539</p>
</div>
<hr class="m_bottom_15">
<div class="clearfix m_bottom_5">
<a href="#"><img
src="<%=path%>/Ui/images/bestsellers_img_3.jpg" alt=""
class="f_left m_right_15 m_sm_bottom_10 f_sm_none f_xs_left m_xs_bottom_0"></a>
<a style="font-size:12px"
href="#"
class="color_dark d_block bt_link">千滋马卡龙</a>
<p class="scheme_color">$49.90</p>
<br/>
<p class="scheme_color">销量：35823</p>
</div>
</div>
</figure>
<figure class="widget shadow r_corners wrapper m_bottom_30">
<figcaption>
<h3 class="color_light">特色甜点</h3>
</figcaption>
<div class="widget_content">
<div style="font-family:'黑体'" class="tags_list">
<a href="#" class="color_dark d_inline_b v_align_b">提拉米苏.</a> <a
href="#"
class="color_dark d_inline_b f_size_ex_large v_align_b">奶油泡芙.</a>
<a href="#" class="color_dark d_inline_b v_align_b">苹果派.</a> <a
href="#" class="color_dark d_inline_b f_size_big v_align_b">芒果布丁.</a>
<a href="#" class="color_dark d_inline_b v_align_b">椰奶冻.</a> <a
href="#" class="color_dark d_inline_b v_align_b">蛋挞.</a> <a
href="#" class="color_dark d_inline_b f_size_large v_align_b">香梅冰激凌，</a>
<a href="#" class="color_dark d_inline_b v_align_b">蒙布朗.</a> <a
href="#" class="color_dark d_inline_b v_align_b">蓝莓奶酪.</a> <a
href="#"
class="color_dark d_inline_b f_size_ex_large v_align_b">戚风蛋糕.</a>
<a href="#" class="color_dark d_inline_b v_align_b">柠檬蛋糕.</a> <a
href="#" class="color_dark d_inline_b v_align_b">派马芬.</a> <a
href="#" class="color_dark d_inline_b v_align_b">芒果慕斯.</a> <a
href="#" class="color_dark d_inline_b f_size_big v_align_b">凤梨酥.</a>
<a href="#" class="color_dark d_inline_b v_align_b">玛德琳.</a>
</div>
</div>
</figure>
</aside>
</div>
</div>
</div>
<script src="<%=path%>/Ui/js/jquery.min.js"></script>
<script src="<%=path %>/Ui/js/jquery.page.js"></script>
<jsp:include page="footer.jsp"></jsp:include>
</body>
<script>
$(document).ready(function () {
let _this = this;
$.ajax({
type: "post",
url: "/NewDemo/showusercollect/1.do?user_id=${sessionScope.user.user_id}",
dataType: "json",
async: false,
success: function (msg) {
console.log(msg)
let goods = msg.list;
_this.total = msg.total;
for (let i = 0; i < goods.length; i++) {
let tempHtml = $("#temp1").html();
tempHtml = tempHtml.replaceAll("{{goods_id}}", goods[i]["GOODS_ID"]);
tempHtml = tempHtml.replaceAll("{{goods_title}}", goods[i]["GOODS_TITLE"]);
tempHtml = tempHtml.replaceAll("{{goods_img}}", goods[i]["GOODS_IMG"]);
tempHtml = tempHtml.replaceAll("{{goods_price}}", goods[i]["GOODS_PRICE"]);
tempHtml = tempHtml.replaceAll("{{collect_id}}", goods[i]["COLLECT_ID"]);
tempHtml = tempHtml.replaceAll("{{pageNum}}", msg.pageNum);
tempHtml = tempHtml.replaceAll("{{user_id}}", ${sessionScope.user.user_id});
$("#trn").append($(tempHtml));
}
}
});
new Pagination({
element: '#pages',
type: 1,
pageCount: 5,
pageIndex: 1,
pageSize: 6,
total: _this.total,
jumper: true,
singlePageHide: false,
prevText: '上一页',
nextText: '下一页',
disabled: true,
currentChange: function (index) {
$("#trn").empty();
$.ajax({
type: "post",
url: "/NewDemo/showusercollect/" + index + ".do?user_id=${sessionScope.user.user_id}",
dataType: "json",
async: false,
success: function (msg) {
_this.total = msg.total;
let goods = msg.list;
for (let i = 0; i < goods.length; i++) {
let tempHtml = $("#temp1").html();
tempHtml = tempHtml.replaceAll("{{goods_id}}", goods[i]["GOODS_ID"]);
tempHtml = tempHtml.replaceAll("{{goods_title}}", goods[i]["GOODS_TITLE"]);
tempHtml = tempHtml.replaceAll("{{goods_img}}", goods[i]["GOODS_IMG"]);
tempHtml = tempHtml.replaceAll("{{goods_price}}", goods[i]["GOODS_PRICE"]);
tempHtml = tempHtml.replaceAll("{{collect_id}}", goods[i]["COLLECT_ID"]);
$("#trn").append($(tempHtml));
}
}
})
}
});
});
function up1() {
var num1 = $("#num").val();
if (num1 >= 200) {
$("#num").val(200);
} else {
$("#num").val(num1 * 1 + 1);
}
};
function down1() {
var num1 = $("#num").val();
if (num1 <= 1) {
$("#num").val(0);
} else {
$("#num").val(num1 * 1 - 1);
}
}
function goumai() {
function getCode(n) {
var all = "azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789";
var b = "";
for (var i = 0; i < n; i++) {
var index = Math.floor(Math.random() * 62);
b += all.charAt(index);
}
return b;
}
console.log(getCode(10));
function getNow(s) {
return s < 10 ? '0' + s : s;
}
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
var date = myDate.getDate();
var h = myDate.getHours();
var m = myDate.getMinutes();
var s = myDate.getSeconds();
let now = year + '-' + getNow(month) + "-" + getNow(date) + " " + getNow(h) + ':' + getNow(m) + ":" + getNow(s);
console.log(now)
var bianhao = getCode(10);
var num2 = $("#num").val();
var jige = $("#price").html();
var zongjia = num2 * jige;
console.log(num2);
console.log(jige);
console.log(zongjia);
var user_id = "${sessionScope.user.user_id}";
var userid = parseInt(user_id);
var goodsid = parseInt($("#goodsid").html());
var collectid = parseInt($("#collectid").html());
alert(collectid);
$.ajax({
type: "post",
url: "/NewDemo/addorder.do?goods_id=" + goodsid,
dataType: "json",
data: {
order_sn: bianhao,
order_time: now,
user_id: userid,
order_payment: zongjia,
},
error: function () {
alert("请求失败")
},
success: function (msg) {
console.log(msg);
let orderid = msg.order.order_id;
window.location.href = "<%=path%>/showorder.do?order_id=" + orderid + "&collect_id=" + collectid;
}
})
}
</script>
</html>
1680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
