第三章,前后端数据交互,重点

使用a标签跳转页面并传递参数(请求servlet跳转)

<a href="/selectGoodsById?id=${goods.id}"><img src="images/${goods.img}" width="160" height="136"/></a>
<!-- a标签跳到servlet,请求只能是get -->
<a href="/targetServlet?param1=value1&param2=value2">点击这里跳转</a>

使用form表单跳转页面,传递值用input的name属性,servlet接收用req.getParameter(“name”)

<form action="/searchGoodsList" method="get">
                <input type="search" name="name" value="" placeholder="请输入关键字" class="s_ipt"/>
                <input type="submit" value="搜索" class="s_btn"/>
            </form>

@WebServlet("/searchGoodsList")
public class searchGoodsListServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      String name = req.getParameter("name");
      req.getRequestDispatcher("detail.jsp").forward(req, resp);
  }
}

Ajax

异步刷新页面

使用方式

1.引入架包

<script src="jquery-3.4.1.js"></script>

2.使用

  $.ajax({
    <!-- 请求的servlet映射路径 -->
                url: "/LoveGoods",
                <!-- 请求方式 -->
                method: "GET",
                <!-- 向servlet发送的数据 -->
                data:{
                    id:12
                },
                // 返回数据类型
                dataType: "JSON",
                success: function (res) {
                    //  servlet响应的数据
                   alert("successful")
                }
            })

Java代码

//  响应Ajax请求,将数据先转成JSON
String jsonStr = JSONObject.toJSONString(result);
// 将数据原路返回
resp.getWriter().write(jsonStr);

实例

<!-- 头文件 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!-- 引入架包 -->
<script src="jquery-3.4.1.js"></script>
<!-- 点击收藏弹出收藏成功 -->
unction m1(id) {
            $.ajax({
                url: "/LoveGoods",
                method: "GET",
                data:{
                    id:id
                },
                // 返回数据类型
                dataType: "JSON",
                success: function (res) {
                    //  servlet响应的数据
                    if (res == 1) {
                        $("ul.cate_list li .carbg a.ss").css({"background: url":"images/heart_h.png no-repeat 10px center"});
                        alert("successful")

                    } else {
                        alert("失败")
                    }

                }
            })
<!-- 操作的jsp页面 -->
<a id="bb1" href="#"  onclick="m1(${good.id})" class="ss">收藏</a>
data里是数组的情况

需要使用JSON.stringify()将数组转成换成 JSON 格式的字符串

$.ajax({
        url:"/checkHot",
        method:"get",
        data:{
            ids:JSON.stringify(ids),
            value:hotValue,
        },
        dataType:"json",
        success:function(res){
            
            if(res>0){
                lightyear.notify('设置成功~','success', 3000);
            }else{
                lightyear.notify('没有要修改的商品或商品设置失败~', 'danger', 100);
            }
        }
    })
上一篇:k8s,声明式API对象理解