从后台返回的JSON数据乱码，怎么处理。

hopperhuang 2016-07-30 10:53:49

用getJSON方法从后台范围数据。
得到的却是乱码的数据

页面显示如下：

我以为是我的页面问题，然后把浏览器的编码方式改一下，改成了UTF-8；
得到的数据不乱码了。

但是页面原来的文字倒是乱码了。

这样的话，我可以说后台返回的数据的编码是UTF-8吗？
后面我试过改变HTML 的LANG属性
还有META 的CHARSET属性。都不行。
（大家可以试试看帮我找找原因，谢谢。）

具体网页源码如下：



<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

	<meta name="renderer" content="webkit">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

	

	

	



    <!-- Bootstrap -->

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">



<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.min.css">



<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>



<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

	<style>

	#now {

	text-align:center;

	font-family: "微软雅黑";

	width:100%;

	

	}

	#now h1 {

	margin-bottom:20px;

	}

	#now div {

	display:inline-block;

	width:20%;

	margin-left:0px;

	margin-right:0px;

	float:left;



	

	}

	#now div p {

	padding-top:20px;

	padding-bottom:20px;

	font-size:45px;

	

	}

	#other {

	font-family: "微软雅黑";

	}

	#today {

	float:left;

	width:25%;

	}

	#today h1 {

	text-align:center;

	}

	#today p {

	padding-left:20%;

	margin-bottom:15px;

	margin-top:15px;

	}

	#future {

	float:left;

	width:75%;

	}

	#future h1 {

	text-align:center;

	margin-bottom:20px

	margin-top:20px;

	} 

	

	#f1,#f2,#f3 {

	float:left;

	width:33%;

	}

	#f1 p,#f2 p,#f3 p {

	font-size:35px;

	padding-left:20%;

	margin-top:20px;

	margin-bottom:20px;

	

	}

	

   </style>

   <script>

   $().ready(function(){

   var data ;

   $.getJSON("http://v.juhe.cn/weather/index?cityname=%E5%B9%BF%E5%B7%9E&dtype=&format=&key=6cecbc0748b7b0b5854d1d0a82aae2a6&callback=?",function(JSON){

   data = JSON;

   console.log(data);

   

   var now = data["result"]["sk"];



   var today = data["result"]["today"];



   var future = data["result"]["future"];

   var keys = Object.keys(future);

   

  

   var firstday = future[ keys[0] ];

   var secondday = future[ keys[1] ];

   var thirdday = future[ keys[2] ];

   console.log(now);

   console.log(today);

   console.log(future);

   console.log(firstday);

   console.log(secondday);

   console.log(thirdday);

   

   

   

 

  function toChineseDay(d){ 

  var test = d ;

  var box = [];

  var date = [];

  var year = [];

  var month = [];

  box = test.split('');

  console.log(box);

  for (var i = 0; i < box.length; i ++ ){

   if( i < 4 ){

    year.push(box[i]);

   }

   else if ( i < 6 ){

   month.push(box[i] );

   }

  else if( i < box.length ){

  date.push(box[i]);

  }

  }

  var  new_year = year.join("");

  var  new_month = month.join("");

  var  new_date = date.join("");

  var new_day  = [];

  new_day.push(new_year);

  new_day.push(new_month);

  new_day.push(new_date);

  new_day.splice(1,0,"年");

  new_day.splice(3,0,"月" );

  new_day.splice(5,0, "日");

  var new_day_toString = new_day.join("");

  return new_day_toString;

  }

  

  var fdc = toChineseDay( firstday["date"] );

  var sdc = toChineseDay( secondday["date"] );

  var tdc = toChineseDay( thirdday["date"] );

  

   

 

 

   $("#now_temp").html(now["temp"]);

   $("#now_inddir").html(now["wind_direction"] );

   $("#now_windstr").html( now["wind_strength"] );

   $("#now_humidty").html( now["humidity"] );

   $("#time").html( now["time"] );

   $("#city").html( today["city"] );

   $("#todday_date").html( today["date_y"] );

   $("#today_week").html( today["week"] );

   $("#today_temp").html( today["temperature"] );

   $("#today_weather").html( today["weather"] );

   $("#today_wind").html( today["wind"] );

   $("#dressing_index").html( today["dressing_index"] );

   $("#dressing_advice").html(today["dressing_advice"] );

   $("#uv_index").html( today["uv_index"] );

   $("#wash_index").html(today["wash_index"] );

   $("#travel_index").html(today["travel_index"] );

   $("#exercise_index").html( today["exercise_index"] );

   $("#f1_date").html( fdc );

   $("#f1_week").html( firstday["week"] );

   $("#f1_wind").html( firstday["wind"] );

   $("#f1_temp").html( firstday["temperature"] );

   $("#f1_weather").html( firstday["weather"] );

   $("#f2_date").html( sdc );

   $("#f2_week").html( secondday["week"] );

   $("#f2_wind").html( secondday["wind"] );

   $("#f2_temp").html( secondday["temperature"] );

   $("#f2_weather").html( secondday["weather"] );

   $("#f3_date").html( tdc );

   $("#f3_week").html( thirdday["week"] );

   $("#f3_wind").html( thirdday["wind"] );

   $("#f3_temp").html( thirdday["temperature"] );

   $("#f3_weather").html( thirdday["weather"] );

   

   } )

    

   



   

   

   

   } )

 

  

   

   </script>

  </head>

  <body>

   <div id = "now" >

   <h1>当前天气状况</h1>

   <div>当前温度：<p id = "now_temp">11</p></div>

   <div>当前风向：<p id = "now_inddir">11</p></div>

   <div>当前风力：<p id = "now_windstr">11</p></div>

   <div>当前湿度：<p id = "now_humidty">11</p></div>

   <div>更新时间：<p id = "time" >11</p></div>

   </div>

   <div id = "other">

   <div id = "today">

   <h1>今天天气状况</h1>

   <p>城市：<span id = "city"></span></p>

   <p>日期：<span id = "todday_date"></span></p>

   <p>今天是：<span id = "today_week"></span></p>

   <p>温度：<span id = "today_temp"></span></p>

   <p>天气：<span id = "today_weather"></span></p>

   <p>风向：<span id = "today_wind"></span></p>

   <p>穿衣指数：<span id = "dressing_index"></span></p>

   <p>穿着建议：<span id = "dressing_advice"></span></p>

   <p>紫外线强度：<span id = "uv_index"></span></p>

   <p>洗车指数：<span id = "wash_index"></span></p>

   <p>旅游指数：<span id = "travel_index"></span></p>

   <p>晨练指数：<span id = "exercise_index"></span></p>

   </div>

   <div id = "future">

   <h1>未来三天天气状况</h1>

   <div id = "f1">

   <p>日期：<span id = "f1_date"></span></p>

   <p>本周：<span id = "f1_week"></span></p>

   <p>风向：<span id = "f1_wind"></span></p>

   <p>温度：<span id = "f1_temp"></span></p>

   <p>天气：<span id = "f1_weather"></span></p>

   </div>

   <div id = "f2">

   <p>日期：<span id = "f2_date"></span></p>

   <p>本周：<span id = "f2_week"></span></p>

   <p>风向：<span id = "f2_wind"></span></p>

   <p>温度：<span id = "f2_temp"></span></p>

   <p>天气：<span id = "f2_weather"></span></p>

   </div>

   <div id = "f3">

   <p>日期：<span id = "f3_date"></span></p>

   <p>本周：<span id = "f3_week"></span></p>

   <p>风向：<span id = "f3_wind"></span></p>

   <p>温度：<span id = "f3_temp"></span></p>

   <p>天气：<span id = "f3_weather"></span></p>

   </div>

   </div>

   </div>

 

  </body>

</html>