ajax jsonp跨域亂碼解決方案
阿新 • • 發佈：2019-02-18
在前端頁面對要在url中傳遞的引數進行urlencoder(),是兩次編碼！！！
在controller中對接收的引數進行解碼，一次解碼！！！
在controller的@requestmapping()註解中新增屬性product:
@RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8")
具體程式碼如下：
主頁（服務端頁面vm）:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="/js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#button").click(function(){ var name =encodeURI($("#name").val()); var tel =$("#tel").val(); var url ="/makeAppointment?name="+encodeURI(name)+"&tel="+tel+"&callback=?"; $.getJSON(url, function(data,status){ $("#spanArea").html(data.userName+"\n "+data.id); }); }); }); </script> </head> <body> <div style="position: absolute;left: 504px;height: 522px;" align="center"> <span style="font-size: 43px;font-family: fantasy;color: darkorange;" id="spanArea">預約頁面</span> <p><span style="font-size: 33px;font-family: fantasy;color: gray;"> 姓名： </span><input type="text" id="name" style="width: 400px;height: 38px;font-size: 33px;"></p> <p><span style="font-size: 33px;font-family: fantasy;color: gray;"> 電話： </span><input type="text" id="tel" style="width: 400px;height: 38px;font-size: 33px;"></p> <button id="button" style="width: 300px;height: 41px;background-color: darkorange;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 30px;"> 預 約</button> </div> </body> </html>
controller程式碼：
package com.jd.jr.controller; import com.alibaba.fastjson.JSON; import com.jd.jr.po.UserPo; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; /** * Created by guojiangjiang on 2015/8/7. */ @Controller public class Appointment { private static Logger logger = Logger.getLogger(Appointment.class); //@RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8") @RequestMapping(value = "/makeAppointment",produces="text/html;charset=UTF-8") @ResponseBody public String getAppointment(String name,String tel,String callback) throws UnsupportedEncodingException { // logger.info("name is: " + URLDecoder.decode(name,"UTF-8") + "tel is : " + URLDecoder.decode(tel,"utf-8")); //String names =new String(name.getBytes("iso-8859-1"),"utf-8"); String names = URLDecoder.decode(name, "utf-8"); int telep = Integer.parseInt(tel); UserPo user = new UserPo(); user.setId(telep); user.setUserName(names); String json = JSON.toJSONString(user); String result = callback+"("+json+")"; System.out.println(result); return result; } }
跨域頁面：
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gbk"> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#button").click(function(){ var name =encodeURI($("#name").val()); var tel =$("#tel").val(); var url ="http://localhost:8080/makeAppointment?name="+encodeURI(name)+"&tel="+tel+"&callback=?"; $.getJSON(url, function(data,status){ $("#spanArea").html(data.userName+"\n "+data.id); }); }); }); </script> </head> <body> <div style="position: absolute;left: 504px;height: 522px;" align="center"> <span style="font-size: 43px;font-family: fantasy;color: darkorange;" id="spanArea">預約頁面</span> <p><span style="font-size: 33px;font-family: fantasy;color: gray;"> 姓名： </span><input type="text" id="name" style="width: 400px;height: 38px;font-size: 33px;"></p> <p><span style="font-size: 33px;font-family: fantasy;color: gray;"> 電話： </span><input type="text" id="tel" style="width: 400px;height: 38px;font-size: 33px;"></p> <button id="button" style="width: 300px;height: 41px;background-color: darkorange;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 30px;"> 預 約</button> </div> </body> </html>