搜索框回写乱码是什么原因?

搜索框回写乱码是什么原因?

http://img1.sycdn.imooc.com//climg/5af126a200015d1112290691.jpg

当搜索输入“白色”之后,搜索出“白色”的商品,此时搜索框里的中文“白色”正常显示,但然后点击下一页后搜索框的回写乱码是什么原因?

这是我的ListServlet.java代码:

package com.yuan.shop.action;

import com.yuan.shop.bean.Article;
import com.yuan.shop.bean.ArticleType;
import com.yuan.shop.bean.Pager;
import com.yuan.shop.service.ShopService;
import org.springframework.util.StringUtils;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/list")
public class ListServlet extends HttpServlet {

    /*
    注意这里不能使用注解的形式(如@Autowired、@Resource)对业务层对象进行注入,
    因为Servlet本身对象是没有交给Spring容器对象管理的
     */
//    @Resource
    private ShopService shopService = null;//定义业务层对象

    private HttpServletRequest request;
    private HttpServletResponse response;

    //在Servlet启用之前会调用这个方法
    @Override
    public void init() throws ServletException {
        super.init();
        //在这个方法中获取Spring容器,然后从容器中得到业务层对象
        ServletContext servletContext=this.getServletContext();//首先获得ServletContext上下文对象
        //获取一个Web目录的上下文对象,这其实就是一个Spring容器对象
        WebApplicationContext webApplicationContext=WebApplicationContextUtils.getWebApplicationContext(servletContext);
        //通过Spring容器得到这个bean(对象),即这个业务层对象
        shopService= (ShopService) webApplicationContext.getBean("shopService");
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {


        try{
            this.request=req;
            this.response=res;
            //再获取元素内容之前先设置编码格式
            request.setCharacterEncoding("UTF-8");
            //response.setCharacterEncoding("UTF-8");

            String method=request.getParameter("method");

            switch (method){
                case "getAll":
                    getAll();//当获取的方式是“getAll”,则调用getAll()方法
                    break;
            }


        }catch (Exception e)
        {
            e.printStackTrace();
        }

    }

    private void getAll() throws ServletException, IOException {
        
        Pager pager=new Pager();//实例化一个分页数据对象

        //获取当前页码
        String pageIndex=request.getParameter("pageIndex");

        if (!StringUtils.isEmpty(pageIndex))//如果获取的当前页码不为空
        {
            pager.setCurrentPageNum(Integer.parseInt(pageIndex));
        }




        //获取二级类型参数
        String secondType=request.getParameter("secondType");
        //获取搜索框中输入的标题
        String title=request.getParameter("title");

        //把用户点击的二级类型也传过去,以实现下拉框的二级类型的选中显示
        request.setAttribute("secondType",secondType);
        //把用户输入在搜索框中的标题回传回去
        request.setAttribute("title",title);

        //获取一级类型参数
        String typeCode=request.getParameter("typeCode");

        if (!StringUtils.isEmpty(typeCode))//如果所获取的商品类型号不为空
        {
            //根据商品的一级类型获取商品的二级类型(二级类型编号是一级类型编号的长度加4)
            List<ArticleType> secondArticleTypes=shopService.loadSecondArticleTypes(typeCode,typeCode.length()+4);
            request.setAttribute("typeCode",typeCode);//注意:把一级类型也传过去,因为二级类型查询需要根据一级类型(否则会出错)
            request.setAttribute("secondTypes",secondArticleTypes);
        }

        //查询商品的一级类型信息
        List<ArticleType> firstArticleTypes= shopService.loadFirstArticleTypes();

        //查询所有商品
        List<Article> articles=shopService.SearchArticles(typeCode,secondType,title,pager);

        request.setAttribute("firstArticleTypes",firstArticleTypes);
        request.setAttribute("pager",pager);//把分页数据对象传过去
        request.setAttribute("articles",articles);


        request.getRequestDispatcher("/WEB-INF/jsp/list.jsp").forward(request,response);

    }
}

list.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品首页</title>
 <!-- Bootstrap core CSS -->
    <%-- c:url 标签的作用:
       1.自动在URL的前面加上context path
       2.如果客户端禁用了Cookie,自动使用URL重写技术,把jsessionid放到url的分号后面
       /taobao/resources/bootstrap/css/bootstrap.css;jsessionid=xxxxx
     --%>
 <link href="<c:url value="/resources/bootstrap/css/bootstrap.css"/>" rel="stylesheet" />
    <link href="${pageContext.request.contextPath }/resources/css/taobao.css" rel="stylesheet" />
    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/My97DatePicker/WdatePicker.js"></script>
</head>

<body>

<!-- 横幅导航条开始 -->
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a  class="navbar-brand " style="color: red" href="<c:url value="/list?method=getAll"/>">电商系统,卖家系统-商品管理</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="<c:url value="/logout"/>">退出</a></li>
            </ul>
        </div>

    </div>
</nav>
<!-- 横幅导航条结束 -->

<!--  横幅下方的主体开始 -->
<div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

 <!-- 侧边导航开始
           一级类型的
 -->
 <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="list-group">
 <c:forEach items="${requestScope.firstArticleTypes }" var="type">
                    <a href="<c:url value="/list?method=getAll&typeCode=${type.code }"/>" class="list-group-item <c:if test="${type.code eq param.typeCode or top.code eq fn:substring(param.typeCode, 0, 4) }">active</c:if>">${type.name }</a>
 </c:forEach>
            </div>
        </div>
 <!--  侧边导航结束 -->
        <!-- 内容主体开始 -->
 <div class="col-xs-12 col-sm-9">
            <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">显示导航条</button>
            </p>


            <div class="alert alert-info" role="alert">
                <div>
                    <form action="<c:url value="/list?method=getAll"/>" method="post">
                        <table class="table-condensed">
                            <tbody>
                            <tr>
                                <td>
                                <select class="btn btn-default" placeholder="类型" id="secondType"
 name="secondType">
                                    <option value="">==请选择类型==</option>
 <c:forEach items="${requestScope.secondTypes }" var="t">
                                        <option value="${t.code}">${t.name}</option>
 </c:forEach>
                                </select>
                                </td>
                                <td>
 <!-- 如果当前选择了商品的类型,仅在该类型下面进行搜索 -->
 <input type="hidden" name="typeCode" value="${typeCode}" />
                                <div class="input-group">
                                    <input type="text" name="title" value="${title}"
 class="form-control" placeholder="搜索商品的标题" />
                                    <div class="input-group-btn">
                                        <button class="btn" type="submit">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </button>
                                    </div>
                                </div>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="添加商品">添加商品</button>
                                   <span style="color: red;">${tip}</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
            </div>

 <!-- 展示商品数据 -->
 <div class="row">
 <c:forEach items="${articles }" var="a">
                    <div class="col-xs-6 col-lg-4">
               <span class="thumbnail">
                    <a class="label label-danger" href="<c:url value="/list?method=deleteById&id=${a.id }&typeCode=${typeCode}&secondType=${secondType}&title=${title}"/>">删除</a>
                    <a class="label label-success" href="<c:url value="/list?method=showUpdate&id=${a.id }&typeCode=${typeCode}&secondType=${secondType}&title=${title}"/>">修改</a>
                <a href="<c:url value="/list?method=preArticle&id=${a.id }"/>">
                  <img src="<c:url value="/resources/images/article/${a.image }"/>" alt="...">
                    <p style="height: 20px; overflow: hidden;">${a.title }</p>
                </a>
                    <p>
                     <span class="price">${a.price }</span>
 <c:if test="${not empty a.discount }">
                            <span class="discountPrice">惊爆价: <fmt:formatNumber value="${a.price * a.discount / 10 }" pattern="0.00"></fmt:formatNumber>(${a.discount }折)</span>
 </c:if>
                    </p>
              </span>
                    </div>
 </c:forEach>
            </div>
            <div class="row"  >
 <!-- 分页标签 -->
 <nav>
                    <ul class="pagination">
                        <li><a href="${pageContext.request.contextPath}/list?method=getAll&typeCode=${typeCode}&secondType=${secondType}&title=${title}&pageIndex=1">首页</a></li>
                        <li><a href="${pageContext.request.contextPath}/list?method=getAll&typeCode=${typeCode}&secondType=${secondType}&title=${title}&pageIndex=${pager.currentPageNum-1}">上一页</a></li>
                        <li><a href="${pageContext.request.contextPath}/list?method=getAll&typeCode=${typeCode}&secondType=${secondType}&title=${title}&pageIndex=${pager.currentPageNum+1}">下一页</a></li>
                        <li><a href="${pageContext.request.contextPath}/list?method=getAll&typeCode=${typeCode}&secondType=${secondType}&title=${title}&pageIndex=${pager.totalPages}">尾页</a></li>
                        <li>
                            <a>总数据量${pager.totalCount},当前<span style="color: red;">${pager.currentPageNum}</span>/${pager.totalPages}</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>

    <hr>

    <footer>
        <p>&copy; 版权所有,欢迎借鉴</p>
    </footer>
</div>

<!-- 弹出框 -->
<div class="modal fade" id="exampleModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">添加物品</h4>
            </div>
            <div class="modal-body ">
                <div align="center">
                    <span style="color:red;"></span>
                    <form name="articleform" class="form-horizontal" action="<c:url value="/list?method=addArticle&typeCode=${typeCode}&secondType=${secondType}&title=${title} "/>" method="post" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">类型编号:</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="code" id="addTypeCode">
 <c:forEach items="${articleTypes}" var="type">
                                        <option value="${type.code}">${type.name}</option>
 </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">标题:</label>
                            <div class="col-sm-4">
                                <input type=text class="form-control" name="titleStr" size="50">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">供应商:</label>
                            <div class="col-sm-4">
                                <input type=text class="form-control" name="supplier" size="50">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">地区:</label>
                            <div class="col-sm-4">
                                <input type=text class="form-control" name="locality" size="50">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">价格:</label>
                            <div class="col-sm-4">
                                <input type=text class="form-control" name="price" size="50">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">库存数量:</label>
                            <div class="col-sm-4">
                                <input type=text class="form-control" name="storage" size="50">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">上架日期:</label>
                            <div class="col-sm-4">
                                <input  class="form-control" name="putawayDate" id="putawayDate"
 style="width: 180px;"  type="text" class="Wdate"
 onclick="WdatePicker({'lang':'zh-cn','skin':'whyGreen','dateFmt':'yyyy-MM-dd HH:mm:ss'})" size="50">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">物品封面:</label>
                            <div class="col-sm-4">
                                <input type="file" class="form-control" name="image" size="40" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">书面描述:</label>
                            <div class="col-sm-6">
                                <textarea rows="5" cols="60" class="form-control" name="description"></textarea>
                            </div>
                        </div>
                        <table>
                            <tr>
                                <td><input type="submit" class="btn btn-success btn-sm" value="提交" /></td>
                                <td>&nbsp;&nbsp;<input type="button" class="btn btn-danger btn-sm" data-dismiss="modal" value="取消" /></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


<!--  横幅下方的主体结束 -->
<!-- 一般来讲,css必须在head里面引入,因为页面加载完成,就需要显示正确的样式 -->
<!-- js一般在页面最后面加载,等页面布局都完成以后,再来处理js文件! -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="${pageContext.request.contextPath }/resources/jquery/jquery.js"></script>
<script src="${pageContext.request.contextPath }/resources/bootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath }/resources/js/taobao.js"></script>
<script type="text/javascript">
 //在整个加载完后再为二级类型绑定切换事件
 $("#secondType").change(function () {
            window.location="${pageContext.request.contextPath}/list?method=getAll&typeCode=${typeCode}&secondType="+this.value;
 });
 //把二级类型选中
 $("#secondType").val("${secondType}");
</script>
</body>
</html>

在request获取元素之前也设置了编码格式,list头文件也设置了编码格式,为何还会出现回写乱码呢?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
喜欢做梦的鱼 2018-05-08 18:28:23

http://img1.sycdn.imooc.com//climg/5af17b790001944307310346.jpg这里,改成:

String method= new String( request.getParameter("method");.getByte("ISO-8859-1"),"utf-8");

另外,http://img1.sycdn.imooc.com//climg/5af17bbf000106ed04840144.jpg保持一致。试一下~~

  • 提问者 源自我心 #1
    谢谢!但是没有效果,它这里并不是method乱码,而是title这个字段,获取的时候没有乱码,而是回写的时候出现了乱码。你的解决方法是处理获取的时候乱码吧
    2018-05-08 18:41:57
  • 喜欢做梦的鱼 回复 提问者 源自我心 #2
    你的回显乱码,是点击“下一页“之后,界面返回最后一页数据,同时文本框里的”白色“显示乱码吗?你在通过超链接拼接传递数据的过程中,用的方式就是get方法,所以继续在list中使用post方式解析可能会产生问题
    2018-05-08 18:54:34
  • 提问者 源自我心 回复 喜欢做梦的鱼 #3
    没太理解你的意思.....
    2018-05-09 19:29:11
提问者 源自我心 2018-05-08 18:06:39

http://img1.sycdn.imooc.com//climg/5af176490001bff812290691.jpg

中文正常显示

好帮手慕珊 2018-05-08 14:16:21

把鼠标放到下一页上,看一下左下角出现的地址中白色是否为乱码?

http://img1.sycdn.imooc.com//climg/5af140980001d79f08690404.jpg

  • 提问者 源自我心 #1
    没有乱码,正常显示为“白色”
    2018-05-08 18:05:50
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
SSM主流框架入门与综合项目实战2018版
  • 参与学习           人
  • 提交作业       205    份
  • 解答问题       4317    个

Java中非常实用的SSM整合开发内容,从Spring开始,到MyBaits的进阶内容,再到SpringMVC的应用,最后是SSM整合开发案例,逐步深入,助你成长为一名Java工程师!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师