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

最新推荐文章于 2023-04-08 19:48:18 发布

伍Wu哈Ha

最新推荐文章于 2023-04-08 19:48:18 发布

阅读量3.6k

点赞数 1

分类专栏： bootstrap 文章标签： jquery ajax

本文链接：https://blog.csdn.net/Peng_Hong_fu/article/details/70729130

版权

bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

伍Wu哈Ha

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
<c:forEach> 循环<a> 标签发送其他DELETE、PUT、POST请求

可以说是强行使用REST风格URL吧<a> 标签发送DELETE、PUT、POST请求 a 标签发送 DELETE、PUT、POST 请求其实并不难，利用 Jquery 的 ajax 请求就可以，当按钮点击就可以执行一个函数<a href="url请求" onclick="sendBtn(this);return false;" > 发送请求</a> return false 为了阻止
复制链接

扫一扫