jsonp实现ajax,jsonp实现ajax跨域访问配置

首先来写login.html

html>

prictice.html

用户名：

密码：

登陆

注册

版本

然后来看下login.js

$(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");

}

})

})

再看下struts配置

最后看下action

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;

}

}

总结:有二点需要注意，一个是js中的dataType,还有jsonp的属性。另一个是返回的json数据的格式是一个带json数据的方法名handler({"username":"aaa","password","bbb"})