可以说是强行使用REST风格URL吧
<a>
标签发送DELETE、PUT、POST请求
a 标签发送 DELETE、PUT、POST 请求其实并不难,利用 Jquery 的 ajax 请求就可以,当按钮点击就可以执行一个函数
<a href="url请求" onclick="sendBtn(this);return false;" > 发送请求</a>
return false 为了阻止 a 标签 href get 方式的提交
function sendBtn(node) {
var url = node.href;/*得到href的值*/
$.ajax({
url:url,/*url也可以是json之类的文件等等*/
type:'PUT',/*DELETE、POST */
success:function (result) {
//判断result结果
if(result){
window.location.reload();
}else{
alert("返回了false")
}
}
})
};
通过 herf 赋值 url 有不好的地方,浏览器会显示连接地址,并且按住按钮拖动会访问get请求
所以可以用 id 来存储 url 地址
<a id="url地址" onclick="sendBtn(this);return false;" >发送请求</a>
<c:forEach>
循环<a>
标签 发送其他DELETE、PUT、POST请求
...
<c:forEach var="order" items="${orderList}" varStatus="sort">
...
<a id="<%=basePath%>Order/order/${order.orderId}/4" onclick="updateBtn(this)" >取消</a>
...
</c:forEach>
...
function updateBtn(node) {
var url = node.id;/*请求的url*/
$.ajax({
url:url,
type:'PUT',
success:function (result) {
if(result){
window.location.reload();
}else{
alert("删除失败")
}
}
})
}
响应请求:
....
@RequestMapping(value = "/order/{orderId}/{state}",method = RequestMethod.PUT)
@ResponseBody
public boolean updateorderState(@PathVariable String orderId,@PathVariable int state){
/*System.out.println("****************"+orderId);
int count = seckillOrderService.updateStateByorderId(orderId,state);
if(count==0){
return false;
}*/
return true;
}
一个BootStrap 比较完整的例子
order.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>订单列表页</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
span.glyphicon{
top:2px;
}
.panel{
margin: 0 30px;
}
#orderimg{
height:50px;
width: auto;
}
.table tbody tr td{
/*垂直居中*/
vertical-align: middle;
}
</style>
</head>
<body>
<div class="panel panel-info">
<div class="panel-heading">${sessionScope.sessionuser.loginname}的订单</div>
<table class="table table-hover">
<thead>
<tr >
<th>#</th>
<th>商品信息</th>
<th>订单时间</th>
<th>金额</th>
<th>订单状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="order" items="${orderList}" varStatus="sort">
<tr>
<%-- 显示 1 2 3 4 5 ...--%>
<td scope="row">${sort.count}</td>
<td>
<img id="orderimg" src="图片地址"
alt="...">
<%--截取字符串,一行只显示25个字符,溢出用...表示--%>
<c:if test="${fn:length(order.seckillId.sname)>25}">
${ fn:substring( order.seckillId.sname ,0,25)}...
</c:if>
<c:if test="${fn:length(order.seckillId.sname)<=25}">
${ order.seckillId.sname}
</c:if>
</td>
<td>
<%--order.createTime必须是日期类型--%>
<fmt:formatDate value="${order.createTime}" pattern="yyyy年MM月dd日 HH:mm:ss" />
</td>
<%--价格默认为 299.00,这个标签就是去掉.00的--%>
<fmt:parseNumber var="p" integerOnly="true"
type="number" value="${order.seckillId.price}" />
<td>¥${p}</td>
<td>
<%--根据订单的状态显示信息 order.state为int型 --%>
<c:choose>
<c:when test="${order.state eq 0 }">(等待付款)</c:when>
<c:when test="${order.state eq 1 }">(准备发货)</c:when>
<c:when test="${order.state eq 2 }">(等待确认)</c:when>
<c:when test="${order.state eq 3 }">(交易成功)</c:when>
<c:when test="${order.state eq 4 }">(已取消)</c:when>
</c:choose>
</td>
<td>
<a href="查看的链接" role="button" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-info-sign"></span> 查看</a>
<c:choose>
<c:when test="${order.state eq 0 }">
<a role="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-credit-card"></span> 支付</a>
<a id="<%=basePath%>Order/order/${order.orderId}/4" onclick="updateBtn(this)" role="button" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove"></span> 取消</a>
</c:when>
<c:when test="${order.state eq 2 }">
<a role="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-ok"></span> 确认收货</a>
</c:when>
</c:choose>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript'>
function updateBtn(node) {
var url = node.id;
$.ajax({
url: "url",
type: 'PUT',
success: function (result) {
if (result) {
window.location.reload();
} else {
alert("更新失败")
}
}
});
}
</script>
</body>
</html>
@RequestMapping(value = "/order/{orderId}/{state}",method = RequestMethod.PUT)
@ResponseBody
public boolean updateorderState(@PathVariable String orderId,@PathVariable int state){
/*
int count = seckillOrderService.updateStateByorderId(orderId,state);
if(count==0){
return false;
}*/
return true;
}