jsonp和java联合使用解决跨域问题

最新推荐文章于 2024-08-12 21:12:57 发布

biany2

最新推荐文章于 2024-08-12 21:12:57 发布

阅读量1.4w

点赞数

分类专栏： dojo jsonp

本文链接：https://blog.csdn.net/biany2/article/details/13290807

版权

dojo 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jsonp

1 篇文章 0 订阅

订阅专栏

这里用到的是dojo 原装的jsonp技术 dojo.io.script.get

项目访问的后台是已经成型的ssi框架action，前端是一个mobile页面。

 <!DOCTYPE HTML>  
 <html> 
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
		minimum-scale=1,user-scalable=no"/>
	
		
		<link rel="stylesheet" type="text/css" href="demo.css"/>	
		<link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/android/android.css" 
		type="text/css" media="screen" title="no title" charset="utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
    data-dojo-config="async:true"></script>
	</script>
	 <script> 
	 require(["dojox/mobile/parser", "dojox/mobile/deviceTheme", "dojox/mobile/compat", "dojox/mobile","dojox/mobile/TextBox","dojox/mobile/Button" ],
		function(parser, deviceTheme) {	 
			// Parse the page for widgets!
			parser.parse();
		}
	);
	 </script> 
 <head> 
 <title>PhoneGap Test</title> 

 </head> 
<body>
	<!-- ACCIDENT TOOLKIT PAGE -->
	<div dojoType="dojox.mobile.View" id="accHelp" selected="true">
	    <h1 dojoType="dojox.mobile.Heading">登录页面</h1>
	   
	    <ul dojoType="dojox.mobile.RoundRectList">
	        <li dojoType="dojox.mobile.ListItem" >
				
					<label>Username</label>					
					<input id="username" class="mblTextBox" type="text"  data-dojo-type="dojox.mobile.TextBox">
					
				
			</li>
	        <li dojoType="dojox.mobile.ListItem" >
				
					<label>Password</label>
				
					<input id="password" class="mblTextBox" type="password"  data-dojo-type="dojox.mobile.TextBox">
					
				
			</li>
				
			<button id="resetBtn" class="baseBtn orangeBtn" dojoType="dojox.mobile.Button" type="submit" onClick="itemClicked();"> Reset Form
			</button>
			<h2 dojoType="dojox.mobile.RoundRectCategory" id="loginResult"></h2>
	    </ul>
		
	</div>
	
	
	
	<!-- EXCHANGE DRIVER INFO PAGE -->
	
	<script>
		
		function itemClicked() {
		  var userName = dojo.byId("username").value + ":" + dojo.byId("password").value ;
		  var url = "http://192.168.0.20:8080/igsys/mobilelogin.action";
		  login(url);	
		
		}
	
		function login(url){
		
			require(["dojo/io/script", "dojo/dom", "dojo/_base/array", "dojo/domReady!"],   
					function(){
				 //first do the io script request  
					//make the request just as before
				dojo.io.script.get({
					url: url,
					callbackParamName: "callback",
					content: {
					   userName: "admin:123456",
					   password: "123456"
					},
					 load: function (data) {
                              console.log('OK', data.result);
								if(data.result=="200"){
									dojo.byId("username").innerHTML = "登录成功";
									location.href='loginResult.html';
								}
								else dojo.byId("loginResult").innerHTML = "登录失败";
                            }, 
					error: function(error) {
                                console.log('Error', error);
                             }
				});
			 }); 
		}
	</script>
</body>
 </html>

后台的mobilelogin.action只要添加两行代码即可

   String  callback = this.getRequest().getParameter("callback");
                
                String jsoncallback = callback + "({'result':"+result+"})";
                
                PrintWriter out =  this.getResponse().getWriter();
               
                out.print(jsoncallback);
               
                out.flush();
                out.close();

前端的参数传递通过传统的String sysUserName = this.getRequest().getParameter("userName")获取。

这里有必要解释一下，jsonp跨域访问，会在http://xxxx.action后面默认加上callback参数值，这个相当于一个sessionId一样。

而返回值result可以通过html的data直接获取.这样一来，就可以实现json数据的返回了。