请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

乱码

前端开发时出现乱码,找了很久也没找到问题所在。
这是shopoperation.html文件
乱码网页
图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SUI Mobile Demo</title>
<meta name="description"
	content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="阿里巴巴国际UED前端">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

<!-- Google Web Fonts -->

<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

<link rel="apple-touch-icon-precomposed"
	href="/assets/img/apple-touch-icon-114x114.png">
<script>
	//ga
</script>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
</script>

</head>
<body>
	<div class="page-group">
		<div id="page-label-input" class="page">
			<header class="bar bar-nav">
				<a class="button button-link button-nav pull-left back"
					href="/demos/form"> <span class="icon icon-left"></span> 返回
				</a>
				<h1 class="title">商店信息</h1>
			</header>
			<div class="content">
				<div class="list-block">
					<ul>
						<!-- Text inputs -->
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title label">商铺名称</div>
									<div class="item-input">
										<input type="text" id="shop-name" placeholder="商铺名称">
									</div>
								</div>
							</div>
						</li>
						<!-- 商铺分类 下拉列表 -->
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title label">商铺分类</div>
									<div class="item-input">
										<select id="shop-category">
										</select>
									</div>
								</div>
							</div>
						</li>
						<!-- 区域分类 下拉列表 -->
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title label">所属区域</div>
									<div class="item-input">
										<select id="area">
										</select>
									</div>
								</div>
							</div>
						</li>
						<!-- 详细地址 text -->
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title label">详细地址</div>
									<div class="item-input">
										<input type="text" id="shop-address" placeholder="详细地址">
									</div>
								</div>
							</div>
						</li>
						<!-- 联系电话 text -->
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title label">联系电话</div>
									<div class="item-input">
										<input type="text" id="shop-phone" placeholder="联系电话">
									</div>
								</div>
							</div>
						</li>
						<!-- 缩略图 上传控件 -->
						<li>
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title label">缩略图</div>
									<div class="item-input">
										<input type="file" id="shop-img">
									</div>
								</div>
							</div>
						</li>
						<!-- 店铺简介 textarea -->
						<li class="align-top">
							<div class="item-content">
								<div class="item-inner">
									<div class="item-title label">店铺简介</div>
									<div class="item-input">
										<textarea id="shop-desc" placeholder="店铺简介"></textarea>
									</div>
								</div>
							</div>
						</li>
						<!-- 验证码 kaptcha -->
					</ul>
				</div>
				<div class="content-block">
					<div class="row">
						<div class="col-50">
							<a href="#" class="button button-big button-fill button-danger">取消</a>
						</div>
						<div class="col-50">
							<a href="#" class="button button-big button-fill button-success">提交</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type='text/javascript'
			src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript'
			src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript'
			src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
</body>
</html>

这是spring-web文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">
    <!-- 配置SpringMVC -->
    <!-- 1.开启SpringMVC注解模式 -->
    <mvc:annotation-driven />
 
    <!-- 2.静态资源默认servlet配置 
    (1)加入对静态资源的处理:js,gif,png 
    (2)允许使用"/"做整体映射 
    -->
    <mvc:resources mapping="/resources/**" location="/resources/" />
    <mvc:default-servlet-handler />
 
    <!-- 3.定义视图解析器 -->
    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/html/"></property>
        <property name="suffix" value=".html"></property>
    </bean>
    <!-- 文件上传解析器 -->
    <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8"></property>
        <!-- 1024 * 1024 * 20 = 20M -->
        <property name="maxUploadSize" value="20971520"></property>
        <property name="maxInMemorySize" value="20971520"></property>
    </bean>
 
    <!-- 4.扫描web相关的bean -->
    <context:component-scan base-package="com.my.o2o.web" />
</beans>

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

2回答

xiaoleecr 2019-03-10 22:29:47

如果你确定前后端编码一致,那也有可能是浏览器问题,虽然我自己也觉得很奇怪。当我用edge打开的时候显示是正常的,而换成chrome打开则会出现乱码,手机上的chrome打开也是乱码,但用魅族手机浏览器打开则是正常。所以个人认为很可能是浏览器本身的问题,所以我在chrome上装了个charset插件,该插件可以选择页面编码,在利用该插件修改页面编码为utf-8以后,乱码就没有了

1 回复 有任何疑惑可以回复我~
翔仔 2018-12-20 23:41:09

同学好,需要你eclipse或者idea右键你的shopoperation.html这个页面,看看属性里面,编码是不是utf8,如果是gbk等其他编码,请改成utf8的。

其次,打开chrome的时候,看看开发者模式下当前页面的编码,具体可以百度一下

0 回复 有任何疑惑可以回复我~
  • 提问者 慕虎0518913 #1
    老师好,我在eclipse中查看了shopoperation.html的属性是utf-8. 使用chrome浏览器打开之后,查看当前页编码显示<meta charset="utf-8">但是当我查看网页request head的时候却显示accept langauge= en-US,en;q=0.9
    回复 有任何疑惑可以回复我~ 2018-12-21 11:29:40
  • 翔仔 回复 提问者 慕虎0518913 #2
    同学好 accept language只是表明浏览器要接收的语言,不是这个,具体是要看encode即编码,需要保证编码一致,并不是语言哈
    回复 有任何疑惑可以回复我~ 2018-12-23 00:59:04
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信