Jfinal解决AJAX的跨域请求
2017-12-17 本文已影响0人
ccq_inori
JFinal 是基于 Java 语言的极速 WEB + ORM 框架，其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。
一开始使用AJAX来传输json数据时，在本机上还是可以实现的，但是没法给url给其他人调用并且传输数据。
然后发现jsonp可以解决跨域请求（这应该是就是我寻找的）。
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
由于没有两台电脑，所以我选择了两种工具(Eclipse和myEclipse)来对AJAX的跨域请求进行回应.。
前端是在myEclipse上书写，后台在Eclipse上书写.
首先是前端:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="myDiv"><h2>这里是myeclipse的页面</h2></div>
<button type="submit">提交</button>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$('button').click(function(){
$.ajax({
type:'get',
url:'http://localhost/submit',
data:{
username:'123456',
password:'456789',
name:'xiaoming',
remark:'无'
},
dataType:'jsonp',
contentType:'application/x-www-form-urlencoded;charset=UTF-8',
async:false,
cache:false,
success:function(response){
//扩展回调函数
alert(response.res),
$('h2').text('成功回应跨域请求')
},
error:function(){
//处理异常数据...
alert(0)
}
});
})
</script>
</body>
</html>
接下来是controller
public void submit()
{
System.out.println(getPara("username"));
System.out.println(getPara("password"));
System.out.println(getPara("name"));
System.out.println(getPara("remark"));
getResponse().addHeader("Access-Control-Allow-Origin", "*");
Map json=new HashMap();
json.put("status",0);
json.put("res",true);
String callback = getRequest().getParameter("callback");
String jsonp = callback+"("+ JsonKit.toJson(json)+")";//返回的json 格式要加callback()
renderJson(jsonp);
}
总结:发现学习后台，你还要基本掌握一些前端技术和框架，起码先自己先玩熟先，不然到了真正做项目的时候，真的来不及，要懂得前端的数据是以什么形式来传输到后台的，你又怎么回应前端的请求。
