您的位置：首页 > Web前端 > JQuery

<c:forEach> 循环<a> 标签发送其他DELETE、PUT、POST请求

2017-04-25 13:08 615 查看

可以说是强行使用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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery ajax

相关文章推荐

新的分享

章节导航

<c:forEach> 循环<a> 标签 发送其他DELETE、PUT、POST请求

<a> 标签发送DELETE、PUT、POST请求

<c:forEach> 循环<a> 标签 发送其他DELETE、PUT、POST请求

一个BootStrap 比较完整的例子

<c:forEach> 循环<a> 标签发送其他DELETE、PUT、POST请求

<a>
标签发送DELETE、PUT、POST请求

<c:forEach>
循环
<a>
标签发送其他DELETE、PUT、POST请求