springboot-前台和后台互相传值

前台和后台互相传值，主要分为ajax方式和thymleaf跳转页面两种方式。常用的是ajax异步刷新页面方式。

需要源码，请加微信号，进技术交流群，发送springboot105，免费获取源码。

一 ajax异步刷新前后台传值方式

1.  案例：前台ajax表单post方式提交id，从数据库获取数据显示到前台

（1）memberSearch.html页面及ajax提交，并解析json数据显示到前提

    ID
    
    搜索


    
姓名：---
    
性别：---
    
手机号：---

（2）后台从数据库获取到值，通过json格式传递给前台

    @ResponseBody
    @PostMapping("searchById")
    public String getMemberById(@RequestParam("memberId") Integer memberId)
    {
        System.out.println(memberId);
        Member member=memberService.getMemberById(memberId);
        JSONObject result = new JSONObject();
        if(member!=null) {
            System.out.println(member.getName());
            result.put("status", "success");
            result.put("member", member);
        }
        else
        { result.put("status", "fail");
        }
        return result.toJSONString();
    }

2.前台通过ajax将参数get传递给后台

（1）本例是bootstrapTable通过参数的get方式传递

$('#rightTable').bootstrapTable({
    url: "findUsersByRoleId",
    contentType : "application/x-www-form-urlencoded",
    method:"get",
    //请求后台的URL（*）
    dataType: "json",
    pagination: false,
    queryParamsType:'',
    queryParams : function(e) {
		var param = {
		roleId : $("#roleId").val()
		};
        return param;
		},
    autoSelectFirstRow: false,
    clickToSelect: true,
    columns:[
                {
                    checkbox: true
                }, {
                    title   : '姓名',
                    field   : 'username',
                    align   : 'center',
                }, {
                    title   : '工号',
                    field   : 'employeeNum',
                    align   : 'center'
                }, {
                    title   : '部门',
                    field   : 'department',
                    align   : 'center'
                }
            ],
    uniqueId:'employeeNum'
});

（2）后台通过参数接收，需要加@ReponseBody

  //根据角色查找用户
    @ResponseBody
    @RequestMapping("/findUsersByRoleId")
    public String searchRoleUser(String  roleId) {

        Integer roleIdInt=Integer.parseInt(roleId);
        List userList=roleSerivce.findUsersByRoleId(roleIdInt);
        System.out.println("userList.size()==="+userList.size());
        int total = (int) userList.size();
       for(int i=0;i

3.前台通过ajax将参数post传递给后台

（1）前台将参数通过post传递

function searchLRoleUsers() {

       
    var name = $('#name').val();   
    var num = $('#num').val();
    var depart = $('#depart').val();

    $.ajax({
        type: "post",
        url: "searchLRoleUsers",
        data: {
            name: name,
            num: num,
            depart:depart
        },
        dataType: "json",
        success: function(json) {

            $("#leftTable").bootstrapTable('load', json); //主要是要这种写法
        }
    });

       
}

（2）后台通过request接收

    //查找用户
    @ResponseBody
    @RequestMapping("/searchLRoleUsers")
    public String searchLRoleUsers(HttpServletRequest request) {

        String name=request.getParameter("name");
        String num=request.getParameter("num");
        String depart=request.getParameter("depart");
       
        System.out.println("name=="+name+";num=="+num+";depart==="+depart);
        List userList=userService.searchRoleUsers(name,num,depart);
        int total = (int) userList.size();

        JSONObject result = new JSONObject();
        result.put("rows",userList);
        result.put("total",total);
        return result.toJSONString();
    }

4. （1）前端form提交

ID
      

工号



           

function updateUser() {
    var param = $("#editForm").serializeArray();
    //设为disable则无法获取
    $.ajax({
        url: "editUser",
        method: "post",
        data: param,
        dataType: "json",
        success: function(data) {
            if (data.state == "success") {
                $("#editModal").modal("hide");
                document.getElementById("tipContent").innerText = "修改成功";
                $("#Tip").modal('show');
                $("#bootstrap-table").bootstrapTable('refresh');
            }
        },
        error: function(data) {
            alert("wrong");
        }
    });
}

（2）后段类接收

    @ResponseBody
    @RequestMapping("/editUser")
    public String editUserModal(User user)
    {
        System.out.println("editUserModal");
        userService.updateUser(user);
        JSONObject result = new JSONObject();
        result.put("state", "success");
        return result.toJSONString();

    }

二 thymeleaf页面跳转方式

1.前台form表单get方式提交

（1）前台表单get方式提交, 注意input的name和controller的参数名称一致

 

     

        工号
        
     
     

         姓名
         
     
     注册

（2）后台 @GetMapping("")，多个参数使用@RequestParam("name")接收

 @GetMapping("/doRegister")
        public String doRegister(@RequestParam("name") String name, @RequestParam("password") String password,Model model) {
        User user=new User();
        user.setUsername(name);
        ...
        userService.insertUser(user);
        model.addAttribute("msg", "注册成功");
        System.out.println("注册成功");
        return "registerInfo";
    }

（3）通过model返回给前台registerInfo.html

2.前台form表单post方式提交

（1）前台post方式

 

     

        工号
        
     
     注册

（2）后台 @PostMapping("")，多个参数使用@RequestParam("name")接收

 @PostMapping("/doRegister")
            public String doRegister(@RequestParam("name") String name, @RequestParam("password") String password,Model model) {
        User user=new User();
        user.setUsername(name);
        ...
        userService.insertUser(user);
        model.addAttribute("msg", "注册成功");
        System.out.println("注册成功");
        return "registerInfo";
    }

3.前台get带参数传给后台

（1）前台地址加参数

（2）后台controller通过RequestParam接收

 @GetMapping("roleUsers")
    public String getRoleUsers(Model model,@RequestParam("roleId") String roleId) {
        System.out.println("roleId==="+roleId);
        model.addAttribute("roleId", roleId);
        return "role/roleUsers";
    }

4. 后台给Model存值传给前台thymeleaf

（1）后台将值存放到Model

 @GetMapping("roleUsers")
    public String getRoleUsers(Model model,@RequestParam("roleId") String roleId) {
        System.out.println("roleId==="+roleId);
        model.addAttribute("roleId", roleId);
        return "role/roleUsers";
    }

（2）前台通过thymeleaf的th:value接收