ajax异步获取数据后动态向表格中添加数据(行)

因为某些原因，项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面，网上找了半天都没有 看到现成的，决定自己写个例子

1、HTML页面

    
    
    
    
    

    
    






    

        

            
预定截止日期
            

        
        

            
SEQ
            

        
        

            
订单号
            

        
        

            
排序字段
            

                酒店seq
                订单号
                cellid
            
        
        

            

            

                
            
        
    







    

        
hotelSeq
        
酒店名称
        
订单号
        
联系人手机号
        
预定时间
        
userId
        
cellid
        
gps定位城市
        
wifi定位城市
        
定位距离
    
    

    

2、页面对应的js(cheat-order.js)

$(function () {
    $('#btSearch').click(function () {
        var checkDate = $('#checkDate').val();
        var orderNo = $('#orderNo').val();
        var sortFiled = $('#sortFiled').val();
        var hotelSeq = $('#hotelSeq').val();
        var tbody = window.document.getElementById("tbody-result");

        $.ajax({
            type: "post",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            url: "http://localhost:8080/user/queryCheatOrder",
            data: "{\"hotelSeq\":\"" + hotelSeq
            + "\",\"orderNo\":\"" + orderNo
            + "\",\"sortFiled\":\"" + sortFiled
            + "\",\"checkDate\":\"" + checkDate
            + "\"}",
            success: function (msg) {
                if (msg.ret) {
                    var str = "";
                    var data = msg.data;

                    for (i in data) {
                        str += "" +
                            "" + data[i].hotelSeq + "" +
                            "" + data[i].hotelName + "" +
                            "" + data[i].orderNo + "" +
                            "" + data[i].userPhone + "" +
                            "" + data[i].createTime + "" +
                            "" + data[i].userId + "" +
                            "" + data[i].cellid + "" +
                            "" + data[i].gpsCity + "" +
                            "" + data[i].cellCity + "" +
                            "" + data[i].distance + "" +
                            "";
                    }
                    tbody.innerHTML = str;
                }
            },
            error: function () {
                alert("查询失败")
            }
        });
    });
});

3、后端接口

@Controller
@RequestMapping("/user")
public class UserController extends AbstractController {

    private Logger logger = LoggerFactory.getLogger(UserController.class);

    @RequestMapping(value = "/queryCheatOrder", method = RequestMethod.POST)
    @ResponseBody
    public APIResponse> queryCheatOrder(
            @RequestBody Search search,
            HttpServletResponse response) {
        logger.info("传入参数 = {}", JSON.toJSONString(search));

        SearchResult result = new SearchResult();
        result.setHotelName("测试酒店");
        result.setUserId("123456");
        result.setOrderNo("abc");
        result.setHotelSeq("13143rqw34523");
        result.setCellid("123");
        result.setCellCity("北京");
        result.setGpsCity("北京");
        result.setUserPhone("15210108091");
        result.setDistance("1200m");
        result.setCreateTime("2018-08-24");

        List list = Lists.newArrayList();
        list.add(result);
        list.add(result);
        return APIResponse.returnSuccess(list);
    }
}

4、界面示例图

代码下载：https://gitee.com/liuyaohua/spring-simple/tree/master/table-ajax

 

本文已同步更新到公众号，沟通交流请关注公众号。