jsonp实现ajax跨域访问配置

  1. 首先来写login.html


  2. <!DOCTYPE html>
    <html>
      <head>
        <title>prictice.html</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <link rel="stylesheet" href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
    	<script src="js/jquery-1.9.1.js"></script>
    	<script type="text/javascript" src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
    	<script type="text/javascript" src="js/login.js"></script>
      </head>
    <body >
    	<div data-role="head"></div>
    	<div data-role="content">
    	<div style="text-align:center;">
    		<img src="image/grid_knowledge.png" alt="logo" />
    	</div>
    	<div>
    	
    		<span>用户名:</span><input id="username" type="text">
    		<sapn>密码:</sapn><input id="password" type="password">
    		<div data-role="controlgroup" data-type="horizontal" style="text-align:center;">
    			<button id="login" inline="true">登陆</button>
    			<button id="regist" inline="true">注册</button>
    		</div>
    	</div>
    	</div>
    	<div data-role="footer" data-position="fixed" style="text-align:center;">版本</div>
    </body>
    </html>
  3. 然后来看下login.js

  4. $(function(){
    	$.support.cors = true;
    	$.mobile.allowCrossDomainPages=true;
    	$('#login').click(function(){
    		var userName = $('#username').val();
    		var passwd = $('#password').val();
    		//alert(userName + " " + passwd);
    		$.ajax({
    			type:"POST",
    			url:"http://127。0.0.1:8080/sfw/testjsonp",
    			dataType:"jsonp",//这里是重点
    			jsonp:"callback",//这里是重点
    			jsonpCallback : "handler",//这里是重点
    			//context:this,
    			contentType:"application/json;charset=UTF-8",
    			data:{username:userName,passwd:passwd},
    			async:true,
    			success:function(data){
    				alert("login success!");
    				//$(this).alert("3333");
    			}
    		});
    		function handler(data){ //回调函数
    			alert("good");
    		}
    	})
    	
    })
  5. 再看下struts配置
  6.  <package name="json" extends="json-default" >
    	<action name="testjsonp" class="cn.framework.action.TestJsonp" method="testAction">
           		<result type="json">
           		</result>
           </action>
    		
    	</package>
  7. 最后看下action
  8. package cn.framework.action;
    
    import java.io.IOException;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts2.ServletActionContext;
    
    public class TestJsonp extends BaseAction {
    	private static final long serialVersionUID = 1L;
    	public String testAction(){
    		HttpServletRequest request = ServletActionContext.getRequest();
    		HttpServletResponse res = ServletActionContext.getResponse();
    		String username = request.getParameter("username");
    		String password = request.getParameter("passwd");
    		String func = request.getParameter("callback");
    		System.out.println("username:"+username+" password:" +password);
    		StringBuffer s = new StringBuffer();
    		s.append(func);
    		s.append("({\"username\":\"");
    		s.append(username);
    		s.append("\",");
    		s.append("\"password\":\"");
    		s.append(password);
    		s.append("\"})");
    		try {
    			res.getWriter().write(s.toString());
    			res.getWriter().flush();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    	
    }
  9. 总结:有二点需要注意,一个是js中的dataType,还有jsonp的属性。另一个是返回的json数据的格式是一个带json数据的方法名handler({"username":"aaa","password","bbb"})


你可能感兴趣的:(jsonp实现ajax跨域访问配置)