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

来源：互联网发布：mac相簿照片如何导出编辑：程序博客网时间：2024/06/01 11:17

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

0 0

<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请求