前端页面通过post方式跳转页面,值的传递与值的获取

整体思路: A页面需要通过post方式跳转到B页面,A页面传递的值,B页面需要获取。 为了B页面,能够获取到值。可以选择localStorage或者sessionStorage来存储值,localStorage的值是存储在本地中,如果人工不去删除,数据就会一直存在。sessionStorage的值,是存储是当前会话中,通俗一点,就是当前的窗口中。 所以选择sessionStorage来存储值,比较合理(一直没找到前端通过post方式跳转页面并且传值和获取值的其他解决方案,如有更好的方案,感谢推荐)

A页面:

 /*
    * url:跳转链接
    * method:跳转方式
    * params:传递参数   [{name:"test" ,data:"123"}]
    * */
    function goToUrl(url,method,params){
        var form = document.createElement("form");
        form.action = url;
        form.method = method;
        form.style.display = "none";
        document.body.appendChild(form);
        params.forEach(function (param) {
            sessionStorage.setItem(params.name,param.data);
        });
        form.submit();
        return form;
    }
B页面:
var data=sessionStorage.getItem(param.name); //获取值
sessionStorage.removeItem(param.name); //删除值

 

前端页面中,可以通过表单的方式将字段传递到跳转后的页面。表单是HTML中一种用于向服务器提交数据的控件,它可以将用户输入的数据打包成一个HTTP请求发送给服务器。 在Spring MVC中,可以通过注解`@RequestParam`或`@ModelAttribute`来接收前端传递过来的表单数据。其中,`@RequestParam`用于接收单个参数,而`@ModelAttribute`则可以接收一个JavaBean对象的所有属性。 例如,如果我们需要将用户输入的用户名和密码传递到另一个页面,可以在前端页面中使用一个表单: ``` <form action="/login" method="post"> <input type="text" name="username" placeholder="请输入用户名"> <input type="password" name="password" placeholder="请输入密码"> <button type="submit">登录</button> </form> ``` 在这个表单中,`action`属性指定了表单提交的目标地址,`method`属性指定了表单提交的HTTP请求方法。在后端控制器中,我们可以使用`@RequestParam`注解来接收表单数据: ``` @RequestMapping("/login") public String login(@RequestParam("username") String username, @RequestParam("password") String password, ModelMap modelMap){ // 处理登录逻辑 // 将结果存储到ModelMap中 modelMap.addAttribute("result", "登录成功"); // 跳转到另一个页面 return "result"; } ``` 在上面的代码中,我们使用`@RequestParam`注解分别接收了用户名和密码的,然后将处理结果存储到ModelMap中,最后跳转到一个名为"result"的页面。在这个页面中,我们可以通过EL表达式`${result}`获取处理结果的。 需要注意的是,如果表单提交的目标地址是另一个控制器方法,则可以直接将表单数据作为方法的参数来接收。例如: ``` @RequestMapping("/login") public String login(User user, ModelMap modelMap){ // 处理登录逻辑 // 将结果存储到ModelMap中 modelMap.addAttribute("result", "登录成功"); // 跳转到另一个页面 return "result"; } ``` 在这个例子中,我们定义了一个名为"User"的JavaBean类,它包含了用户名和密码两个属性。在控制器方法中,我们直接将这个类作为参数来接收表单数据,然后进行处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值