迴圈 標籤 傳送其他DELETE、PUT、POST請求
阿新 • • 發佈：2019-01-09
可以說是強行使用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的值*/ 通過 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 響應請求：
....
@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;
}