前端页面与页面之间的传参。

场景：在一个页面输入用户名后，跳转到下一页面实现“用户名，欢迎您”的效果。

效果展示：

 第一个页面：

 第二个页面：

 

 一、通过调用JS内置的location.search方法

原理：该方法可以获取url路径中的参数，返回一个字符串。

 得到该字符串后，先把问号去掉，再用split方法将键值对分开，得到参数数组。

 

 美中不足的就是这个方法中文会乱码，当然，可以解决，不过俺不会。

二、通过sessionStorage将信息以键值对的方式保存在浏览器本地，该方法不会有中文乱码问题。

 将按钮绑定点击事件，获取文本框的内容，将其以键值对形式储存在浏览器。

 然后再将其取出

 

 不过该方法生成的键值对信息的生命周期就是当前网页的生命周期，也就是说一旦网页关闭，信息就不存在了。

三、通过localStorage将信息以键值对的方式保存在浏览器本地，该方法不会有中文乱码问题。

  将按钮绑定点击事件，获取文本框的内容，将其以键值对形式储存在浏览器。

  然后再将其取出

 

 该方法生成的键值对信息长期有效，不会随浏览器的关闭而删除，可以用于便签、备忘录等场景。

2023.10.11 更新

最近学习新知识颇感乏力，感觉前面好多东西都忘了，于是往前复习了Java Web内容，发现通过Servlet的request与response也可以实现参数的传递，其与上面几种方法不大相同，这里也总结一下。

四、基于Servlet的request与response的参数传递策略。

前台：

<form method="get" action="/web-project/hDemo">
    <input type="text" name="name"><br>
    <input type="submit" value="提交">
</form>

这里通过GET方法提交表单，我们可以在后台通过request的方法“getParameter”传入键，拿到值。

String name = req.getParameter("name");
System.out.println(name);

演示：

但是这里我们在控制台输出后会发现内容是乱码的

关于乱码原因与解决方案，可以查看我的另一篇文章（乱码原因应该和第一种方式的一样），这里不再解释。

GTE请求与POST请求乱码原因及解决

直接贴代码：

        String name = req.getParameter("name");
        System.out.println(name);

        // 转换字节数据
        byte[] bytes = name.getBytes("ISO-8859-1");

        // 字节数组转换成字符串
        String s = new String(bytes, "UTF-8");
        System.out.println(s);

        resp.setHeader("Content-Type", "text/html;charset=UTF-8"); // 设置响应头的格式为HTML，编码采用UTF-8
        resp.getWriter().write("<h1>"+s+",欢迎您！</h1>"); // 这里就会将内容解析为HTML

效果：

控制台也不再乱码：

由于POST提交方式与GET不大一样，虽然也会乱码，但原因不同，解决方法也不同，不过POST的解决方法要简单一些，只需要字符输入流的变法方式就行了。

将提交方式改为POST：

<form method="post" action="/web-project/hDemo">
    <input type="text" name="name"><br>
    <input type="submit" value="提交">
</form>

后台代码：

        // POST请求解决乱码：设置字符输入流的编码
        req.setCharacterEncoding("UTF-8");

        String name = req.getParameter("name");
        System.out.println(name);

        resp.setHeader("Content-Type", "text/html;charset=UTF-8");
        resp.getWriter().write("<h1>"+name+",欢迎您！</h1>");

效果与上面一样。