`

ajax跨域请求问题

 
阅读更多

不多说话首先看前台

$.ajax({
			url : "http://192.168.1.57:8080/TestM/testAndroid.do",
			type : "get",
			dataType : 'jsonp',  
			jsonp : "callbackParam",
			jsonpCallback: "success_jsonCallback",
			//dateType : "json",
			success : function(data){
				//console.log(data);
				for(var i in data){
					$("#userListRow").append("<li>"+data[i].name +" " +data[i].age +" " +data[i].email +"</li>");
				}
				$("#testdiv").html("aabb");
			},
			error : function(){
				console.log("error");
			}

		})

这里jsonp 和jsonCallback参数jquery文档给出的是这个解释



  简单来说如果使用了

{

jsonp:"callback_param",

jsonCallback:"callback_fun",

}

就相当于请求 xxx.do?callback_param=callback_fun

 

 

 

接着来看后台:

@RequestMapping("testAndroid")
	@ResponseBody
	public void testAndroid(String callbackParam, HttpServletResponse response) throws JsonProcessingException {
		response.setCharacterEncoding("UTF-8");
		
		List<Map<String, Object>> list = new ArrayList<>();
		for (int i = 0; i < 10; i++) {
			Map<String, Object> map = new HashMap<>();
			map.put("name", "张三" + i);
			map.put("age", i + 1);
			map.put("email", "email" + i);
			list.add(map);
		}

		ObjectMapper objectmap = new ObjectMapper();
		String json = objectmap.writeValueAsString(list);
		PrintWriter pWriter = null;
		if(StringUtils.isNotBlank(callbackParam)){ // jsonp
			response.setHeader("Content-type", "application/jsonp;charset=UTF-8");
			try {
				pWriter = response.getWriter();
				String result = new String(json.toString().getBytes(), "UTF-8");
				pWriter.write(callbackParam+"(" + result + ")");
			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				if (pWriter != null) {
					pWriter.flush();
					pWriter.close();
				}
			}
		}else{ //json
			response.setHeader("Content-type", "application/json;charset=UTF-8");
			try {
				pWriter = response.getWriter();
				String result = new String(json.toString().getBytes(), "utf-8");
				pWriter.write( result);
			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				if (pWriter != null) {
					pWriter.flush();
					pWriter.close();
				}
			}
		}

	}

 

 

 

  • 大小: 15.2 KB
分享到:
评论

相关推荐

    解决ajax跨域请求问题

    本文将深入探讨如何解决Ajax跨域请求的问题。 首先,理解“同源策略”是解决问题的关键。同源策略是浏览器为了保障网络安全而设定的一种机制,它禁止了一个源的文档或脚本访问另一个源的属性,这里的“源”指的是...

    ajax 跨域请求问题 jquery jsonp

    **Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...

    Jquery跨域Ajax请求测试

    jQuery,作为一个强大的JavaScript库,提供了便捷的方式来处理这种问题,特别是通过其Ajax功能进行跨域请求。本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域...

    ajax跨域请求jsonp前后台代码

    基于ajax方式的跨域请求jsonp的前后台代码

    ajax跨域请求WebService.asmx

    【Ajax跨域请求WebService.asmx】是一个常见的Web开发技术应用场景,主要涉及到JavaScript的Ajax技术、C#编程语言以及ASP.NET的WebService组件。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的...

    深入浅析Nginx实现AJAX跨域请求问题

    AJAX跨域请求问题是在开发Web应用时经常遇到的一个问题。所谓跨域请求,指的是浏览器出于安全考虑,限制了前端JavaScript代码发起的AJAX请求只能访问与发起请求的页面同一个域下的资源。当需要从一个域名的资源请求...

    ajax跨域请求

    ### AJAX跨域请求详解 #### 一、引言 在Web开发中,由于浏览器的同源策略限制,AJAX请求通常只能向同源服务器发送请求。然而,在实际应用中,跨域请求的需求非常常见。本篇文章将通过一个具体的示例(JSP页面+后台...

    ajax跨域请求demo.zip

    这个"ajax跨域请求demo.zip"压缩包提供了一个关于如何实现Ajax跨域请求的示例,涉及到前后端的交互。 首先,我们关注"前端代码"部分。前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是...

    ajax处理跨域请求

    当使用AJAX进行跨域请求时,我们需要采取特殊的方法来规避同源策略。这里将详细讲解如何通过jQuery的AJAX实现跨域请求。 首先,了解什么是CORS(Cross-Origin Resource Sharing,跨源资源共享)。CORS是一种机制,...

    jsonpajax跨域请求

    4. AJAX跨域: AJAX本身不支持跨域,但是通过CORS(Cross-Origin Resource Sharing,跨源资源共享)机制,可以实现AJAX的跨域请求。服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许指定的源进行...

    html通过 ajax jsonp跨域请求接收和传送数据

    1. **AJAX跨域**: 通常,AJAX请求受到同源策略限制。为实现跨域,我们可以使用CORS(Cross-Origin Resource Sharing)机制。服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许特定的源进行跨域访问...

    Ajax跨域请求解决方案-JSONP

    总的来说,JSONP是Ajax跨域请求的一种实用解决方案,尤其适用于只支持GET请求且不涉及复杂交互的场景。但是,它也有一些局限性,比如不支持POST请求、无法控制HTTP头部、无错误处理机制等。因此,在现代Web开发中,...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    ajax跨域解决办法

    6. **Domain属性(仅限子域)**:在cookies中设置`domain`属性可以实现跨子域共享,但这仅限于同一主域下的子域名之间,对AJAX跨域请求帮助有限。 在实际应用中,开发者通常根据项目需求和服务器环境选择合适的跨域...

    juery mobile使用ajax跨域请求服务器的小实例

    在这里,我们将探讨如何利用jQuery Mobile和Ajax实现跨域请求。 首先,理解什么是跨域请求。由于浏览器的安全策略,JavaScript通常被限制在同源策略之下,即只能访问与当前页面相同协议、域名和端口的资源。但有时...

    用iframe设置代理解决ajax跨域请求问题

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题。于是想用代理的方式来解决这个跨域问题。 什么是跨域?简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他...

    Ajax跨域问题及其解决方案.docx

    ### Ajax跨域问题及其解决方案 #### 一、Ajax跨域问题概述 在现代Web开发中,前后端分离架构越来越流行。这种模式下,前端页面与后端服务通常部署在不同的服务器上,甚至可能位于不同的域名下。当浏览器发起对不同...

    ajax跨域请求调用webservice接口+视频教程

    【标题】"Ajax跨域请求调用WebService接口"是一个关键的技术点,主要涉及到Web开发中的异步数据交互和跨域安全策略。在Web应用程序中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况...

Global site tag (gtag.js) - Google Analytics