AngularJS+Servlet跨域问题

最新推荐文章于 2019-07-30 16:50:48 发布

lhkwangliang

最新推荐文章于 2019-07-30 16:50:48 发布

阅读量940

点赞数 1

分类专栏： AngularJS 文章标签： angularjs servlet jsonp

本文链接：https://blog.csdn.net/lhkwangliang/article/details/46635893

版权

AngularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、JSONP

Controller代码如下：

var myUrl = "http://localhost:8080/domainServer/TestServlet?callback=JSON_CALLBACK";
$http({method:"JSONP", url: myUrl, cache: false}).success(  //cache为true时只向服务器发送一次请求
    function (data, status, headers, config) {
        console.log(data);
        alert(data.name);
    }
).error(
    function (data, status, headers, config) {
        console.log(data);
        alert(data);
    }
);

或者

var myUrl = "http://localhost:8080/domainServer/TestServlet?callback=JSON_CALLBACK";
$http.jsonp(myUrl,{cache: false}).success(
    function(data, status, headers, config){
        console.log(data);
        alert(data.name);
    }
).error(
    function (data, status, headers, config) {
        console.log(data);
        alert(data);
    }
);

服务器端Servlet代码：

private void jsonp(HttpServletRequest req, HttpServletResponse resp)
     throws ServletException, IOException {
     resp.setContentType("application/json;charset=UTF-8");
     resp.addHeader("Access-Control-Allow-Origin", "*");  //文件头中增加该属性，支持跨域

     PrintWriter out = resp.getWriter();
     String callback = req.getParameter("callback");  //获取参数
     StringBuffer sb = new StringBuffer(callback);
     sb.append("(");
     sb.append("{age:" + 18 + ", name: 'Tom'}");
     //sb.append("'test string ...'");
     sb.append(")");
     out.print(sb.toString());  //拼接字符串JSON_CALLBACK(Object)，Object为json串或加引号的字符串
     out.flush();
     out.close();
}

console.log()输出：Object {age: 18, name: "Tom"}

二、Post请求

Controller代码如下：

var myUrl = "http://localhost:8080/domainServer/PostServlet";
$http.post(myUrl, {withCredentials:true, testName:"Tom"}).success(
    function (data, status) {
        console.log(data);
        console.log(status);
    }
);

Servlet代码如下：

private void post(HttpServletRequest req, HttpServletResponse resp)
		throws ServletException, IOException {
	resp.setContentType("application/x-www-form-urlencoded;charset=UTF-8");  //此处为application/x-www-form-urlencoded，否则无法解析
	resp.addHeader("Access-Control-Allow-Origin", "*");  //支持跨域
	
	PrintWriter out = resp.getWriter();
	String testName = req.getParameter("testName"); //获取表单元素
	StringBuffer sb = new StringBuffer();
	sb.append("test{dds(dge");	
	out.print(sb.toString());  //任意字符串
	out.flush();
	out.close();
}

输出值： test{dds(dge

三、通过Script的src属性实现跨域（因为script不存在跨域的问题）

HTML代码：

<?DOCTYPE html>
<html>
<head>
<title>Ajax without XMLHttprequest</title>
</head>
<body>
	<script name="code" class="javascript">
	function cb(result){  //注意名字必须相同
		alert(result.name);  
	};
	
	function start() {  
		var _script=document.createElement("script");  
		_script.src="http://localhost:8080/domainServer/test?callback=cb";//注意名字必须相同
		_script.id="new_src";  
		document.body.appendChild(_script);  
	};
	
	start();
	</script>
</body>
</html>

Servlet代码：

private void script(HttpServletRequest req, HttpServletResponse resp)
		throws ServletException, IOException {
	resp.setContentType("application/json;charset=UTF-8");
	
	PrintWriter out = resp.getWriter();
	String callback = req.getParameter("callback");
	StringBuffer sb = new StringBuffer();
	sb.append(callback);
	sb.append("(");
	sb.append("{age:" + 18 + ", name: 'Tom'}");
	sb.append(")");
	out.print(sb.toString());
	out.flush();
	out.close();
}

输出值：Tom

lhkwangliang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS+Servlet跨域问题

一、JSONPController代码如下：var myUrl = "http://localhost:8080/domainServer/TestServlet?callback=JSON_CALLBACK";$http({method:"JSONP", url: myUrl, cache: false}).success( //cache为true时只向服务器发送一次请求
复制链接

扫一扫