一、前端部分

1、数据展示

 //列表数展示
            var hotel_lis = "";
            for (var i = 0; i < pb.list.length; i++) {
                var hotel = pb.list[i];
                //获取数据

                var li = ' <tr class="gradeX">\n' +
                    '                        <td>' + hotel.hid + '</td>\n' +
                    '                        <td>' + hotel.hname + '</td>\n' +
                    '                        <td>￥' + hotel.price + '起</td>\n' +
                    '                        <td>' + hotel.hotelIntroduce + '</td>\n' +
                    '                        <td>' + hotel.hflag + '</td>\n' +
                    '                        <td >' + hotel.hdate + '</td>\n' +
                    '                        <td>' + hotel.count + '</td>\n' +
                    '                        <td>' + hotel.sid + '</td>\n' +
                    '                    </tr>';

                //拼接字符串
                hotel_lis += li;
            }

            //将user_lis内容设置到tbody
            $("#hotel").html(hotel_lis);

通过字符串拼接把后台返回的数据拼接到标签体内。

2、页面数据序列化

 //校验通过则发送ajax请求，提交表单数据。（serialize方法把数据序列化为键值对的字符串）
                    $.post("hotel/addHotel", $(this).serialize(), function (data) {
                        //进行服务器的数据处理
                        if (data.flag) {
                            //添加成功，提示
                            alert("酒店添加成功！")
                            location.reload();
                        } else {
                            //添加失败，添加提示信息
                            alert("添加失败，酒店已存在！")
                            location.reload();
                        }
                    });

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。序列化后通过ajax请求把数据返回到后台进行操作。

3、name属性

<div class="form-group draggable">
            <label class="col-sm-3 control-label">酒店名称：</label>
                <div class="col-sm-9">
                      <input type="text" name="hname" id="hname" class="form-control" placeholder="请输入酒店名称">
                </div>
 </div>
<div class="form-group draggable">
            <label class="col-sm-3 control-label">价格：</label>
                 <div class="col-sm-9">
                       <input type="text" class="form-control" name="price" id="price"  placeholder="请输入酒店价格">
                   </div>
 </div>

name 属性用于对提交到服务器后的表单数据进行标识或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

4、获取单条数据的属性值

//列表数展示
            var order_lis = "";
            for (var i = 0; i < pb.list.length; i++) {
                var order = pb.list[i];
                //获取数据
                var li = ' <tr class="gradeX">\n' +
                    ' <td>' + order.hid + '</td>\n' +
                    ' <td>' + order.date + '</td>\n' +
                    ' <td>' + order.uid + '</td>\n' +
                    ' <td>' + order.state + '</td>\n' +
                    ' <td><a class="btn btn-default btn-sm" style="color: red" onclick="deleteOrder(' + order.hid + ',' + order.uid + ',\'' + order.date + '\');">删除</a>\n' +
                    ' </tr>';

                //拼接字符串
                order_lis += li;
            }

在展示列表数据时，需要把数据的属性作为参数传递进去，String类型的拼接格式为代码所示。

5、参数类型包含String类型需要转码

        //判断rname不为null或者""
        //string 类型需要转码
        if (date) {
            //url解码
            date = window.decodeURIComponent(date);
        }

二、后端部分

1、BaseServlet

public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求路径
        String uri = req.getRequestURI();
        //获取请求方法
        String methodName = uri.substring(uri.lastIndexOf('/') + 1);
        //获取方法对象
        try {
            Method method = this.getClass().getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this, req, resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }
    
    public void writeValue(Object obj, HttpServletResponse response) throws IOException {
        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(), obj);
    }
    
    public String writeValueAsString(Object obj) throws JsonProcessingException {

        ObjectMapper mapper = new ObjectMapper();
        return mapper.writeValueAsString(obj);

    }

Baseservlet继承HttpServlet，定义了service方法，获取请求路径，请求方法以及方法对象。定义writeValue和writeValueAsString方法用于把后台数据转换为json并写回前台。

2、writeValue和writeValueAsString的区别

writeValue（参数，obj）：直接将传入的对象序列化为json，并且返回给客户端
writeValueAsString（obj）：将传入的对象序列化为json，返回给调用者

相同：将对象转为json字符串

不同：传递的参数

writeValue参数的重载形式：

file ：将转换后的json字符串保存到指定的file文件中
writer ：将转换后的json字符串保存到字符输出流中
outputStream：将转换后的json字符串保存到字节输出流中
jsonGenerator类

使用经验：返回对象使用writeValue，单纯返回字符串使用writeValueAsString。

3、获取参数数据

       //方法一
        Map<String, String[]> map = request.getParameterMap();
        //方法二
         String currentPageStr = request.getParameter("currentPage");

具体根据前台发送的类型来选择，发送的对象使用getParamterMap（）；发送的具体参数使用getParamter（）；

4、封装对象

         //获取参数数据
        Map<String, String[]> map = request.getParameterMap();
        //封装对象
        Order order = new Order();
        try {
            BeanUtils.populate(order, map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

5、集合查询数据表

      //通过uid查询order表得到预定酒店的hid的集合
        List<Order> list = orderService.findHid(uid);
        
        //定义集合存储酒店数据
        List<Hotel> hotels = new ArrayList<>();

        PageBean<Hotel> pb = new PageBean<>();

        //通过遍历hid的集合去hotel表查询就酒店的信息
        for (Order order : list) {
            //多个酒店对象的数据
            Hotel hotel = hotelService.findAll(order.getHid());
            hotels.add(hotel);
        }

        //把数据添加到集合
        pb.setList(hotels);

先遍历集合得到集合的数据，再分别区查询数据表，最后把数据添加到另一个集合中进行封装。