springboot-前台和后台互相传值

42 篇文章 6 订阅
5 篇文章 0 订阅

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

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

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

(1)memberSearch.html页面及ajax提交,并解析json数据显示到前提

<body>
<div>
    <label>ID</label>
    <input name="id" id="id" type="text" >
    <button type="submit" onclick="searchMember()">搜索</button>
</div>
<div>
    <p>姓名:<span id="name">---</span></p>
    <p>性别:<span id="sex">---</span></p>
    <p>手机号:<span id="telephone">---</span></p>
</div>
<script>

function searchMember() {
    var id = $("#id").val();
    $.ajax({
        url: "searchById",
        method: "post",
        data: {
            memberId: id
        },
        dataType: "json",
        success: function(data) {
           
            if (data.status == "success") {
            
               $("#name").html(data.member.name);
               $("#sex").html(data.member.sex);
               $("#telephone").html(data.member.telephone);
             }
        },
        error: function(data) {
            alert("wrong");
        }
    });
}
</script>
</body>

(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<User> userList=roleSerivce.findUsersByRoleId(roleIdInt);
        System.out.println("userList.size()==="+userList.size());
        int total = (int) userList.size();
       for(int i=0;i<userList.size();i++)
           System.out.println(userList.get(i).getEmployeeNum());
        JSONObject result = new JSONObject();
        result.put("rows",userList);
        result.put("total",total);

        return result.toJSONString();
    }

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<User> 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提交

<form id="editForm" method="post" class="form-horizontal">
<div class="form-group" style="display:none">
<label for="editId" class="control-label">ID</label>
<input type="id" name="id"   class="form-control" id="editId" placeholder="" />      </div>
<div class="form-group">
<label for="inputName" class="control-label">工号</label>
<input type="text" name="employeeNum" class="form-control" id="editNum" placeholder=""/>
</div>
</form>
           
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的参数名称一致

 <form class="form-auth-small" method="get"  action="/doRegister">
     <div class="form-group">
        <label for="name" class="control-label sr-only">工号</label>
        <input type="text" class="form-control" id="employeeNum" name="employeeNum" value="" placeholder="工号">
     </div>
     <div class="form-group">
         <label for="name" class="control-label sr-only">姓名</label>
         <input type="text" class="form-control" id="name" name="name" value="" placeholder="姓名">
     </div>
     <button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
</form>

(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

 <p class="contentCenter"><span th:text="${msg}"  style="color:red"></span></p>

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

(1)前台post方式

 <form class="form-auth-small" method="post"  action="/doRegister">
     <div class="form-group">
        <label for="name" class="control-label sr-only">工号</label>
        <input type="text" class="form-control" id="employeeNum" name="employeeNum" value="" placeholder="工号">
     </div>
     <button type="submit" class="btn btn-primary btn-lg btn-block">注册</button>
</form>

(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)前台地址加参数

<div class="modal-body">

                <iframe id="selectRole" src="roleUsers?roleId=" style="width:870px;height:460px;">
                </iframe>
</div>

<script>
     ...
	document.getElementById("selectRole").src="roleUsers?roleId="+row.id;
    $("#userAssignModal").modal('show');
</script>

(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接收

   <input id="roleId" type="hidden" th:value="${roleId}">

 

 

  • 16
    点赞
  • 107
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值