您的位置:首页 > Web前端 > JavaScript

关于跨域返回jsonp的示例

2015-10-27 18:05 501 查看
本文受http://blog.csdn.net/yuebinghaoyuan/article/details/32706277启发,作了小小改动;

本事例基于webwork框架下进行,对于ssh2框架,应该同样适合,没有再进行试验;

第1步:首先创建后台Action类,这里通过循环生成了一个列表;

TestJson.java

/**
* @FileName: TestJson.java
* @Description: TODO(用一句话描述该文件做什么)
* @Copyright: Copyright(C) 2010-2015 All rights Reserved
* @Company: Information Technology Co.,LTD.
* @author: neil
* @version V1.0
* @Createdate: 2015-10-27
*
* Modification  History:
* Date         Author        Version        Discription
* -----------------------------------------------------------------------------------
* 2015-10-27       NEIL          1.0             1.0
* Why & What is modified: <修改原因描述>
*/
package com.web.action;

import java.io.Writer;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.json.JSONObject;

import com.opensymphony.webwork.ServletActionContext;
import com.opensymphony.xwork.ActionSupport;

@SuppressWarnings("serial")
public class TestJson extends ActionSupport {

@SuppressWarnings({ "rawtypes", "unchecked"})
@Override
public String execute() throws Exception {
try {
JSONObject jsonObject = new JSONObject();
List list = new ArrayList();
for (int i = 0; i < 4; i++) {
Map paramMap = new HashMap();
paramMap.put("bank_no", 100 + i);
paramMap.put("money_type", i);
paramMap.put("bank_name", i);
paramMap.put("bank_type", i);
paramMap.put("bank_status", 0);
paramMap.put("en_sign_ways", 1);
list.add(paramMap);
}
JSONArray rows = JSONArray.fromObject(list);
jsonObject.put("RESULTSET", rows);
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/javascript");

boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
jsonP = true;
System.out.println("jsonp");
response.setContentType("text/javascript");
} else {
System.out.println("json");
response.setContentType("application/x-json");
}
response.setCharacterEncoding("UTF-8");
Writer out = response.getWriter();
if (jsonP) {
out.write(cb + "(" + jsonObject.toString() + ")");
System.out.println(jsonObject.toString());
} else {
out.write(jsonObject.toString());
System.out.println(jsonObject.toString());
}
} catch (Exception e) {
e.printStackTrace();
}

return null;
}
}


第2步:配置xwork.xml文件;

<action name="testjson" class="com.web.action.TestJson">
<result name="success" type="json">
<param name="jsonObjectProperty">jsonObject</param>
</result>
</action>


第3步:前台页面调用

$.ajax({
type: "GET",
url: "http://localhost:8080/zhqx/testjson.action",
dataType: "jsonp",
jsonp: "callback",
success: function(data) {
alert("a");
}
});


请注意,jsonp:"callback"中的值要与后台action中String cb = request.getParameter("callback");一致,否则无法进行回调;

通过此方法,就可以实现跨域访问,无论前端页面在哪里都可以实现调用。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: