一、服务端代码
@RequestMapping("getStudent")
public void getStudent(HttpServletRequest req,HttpServletResponse resp){
try {
req.setCharacterEncoding("utf-8");
} catch (UnsupportedEncodingException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
resp.setContentType("text/html;charset=utf-8");
String name=req.getParameter("name");
String sex=req.getParameter("sex");
byte[] b;//使用axios交互时需要使用终极转码,使用ajax则不需要中及转码,值需要设置request编码为utf-8
try {
b = name.getBytes("ISO-8859-1");
name=new String(b,"utf-8");
b = sex.getBytes("ISO-8859-1");
sex=new String(b,"utf-8");
} catch (UnsupportedEncodingException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}//用tomcat的格式(iso-8859-1)方式去读。
System.out.println("姓名:"+name+"\t性别:"+sex);
try {
PrintWriter out=resp.getWriter();
out.print("[{lattice:\"格子\"},{lattice:\"222\"}]");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
二、html文件测试代码
axiostest
<script src="axios.js"></script>
<script src="jquery-3.1.1.js"></script>
<script>
function on(){
axios.get('http://127.0.0.1:8080/vue_js/student/getStudent.do', {
params: {
name:"格子",
sex:'男'
}//此处只能传json对象(已经构造完成的或者在此处构造json对象)
})
.then(function (response) {
console.log(response);
//回传的是一个json对象,包括data,status
//{data: "[{lattice:"格子"},{lattice:"222"}]", status: 200, statusText: "OK", headers: Object, config: Object…}
var json=eval(response.data);
$.each(json,function(){
console.log(this.lattice);
});
alert(response.data);
})
.catch(function (response) {
console.log(response);
});
}
</script>
在Chrome中按下F12查看控制台输出信息
XMLHttpRequest cannot load http://127.0.0.1:8080/vue_js/student/getStudent.do?name=%E6%A0%BC%E5%AD%90&sex=%E7%94%B7.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
此时,本地请求能够到达服务端,服务端能够打印出请求提交的name以及sex,但是本地浏览器query无法正常接收来自服务端返回的数据。