不多说话首先看前台
$.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(); } } } }
相关推荐
本文将深入探讨如何解决Ajax跨域请求的问题。 首先,理解“同源策略”是解决问题的关键。同源策略是浏览器为了保障网络安全而设定的一种机制,它禁止了一个源的文档或脚本访问另一个源的属性,这里的“源”指的是...
**Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...
jQuery,作为一个强大的JavaScript库,提供了便捷的方式来处理这种问题,特别是通过其Ajax功能进行跨域请求。本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域...
基于ajax方式的跨域请求jsonp的前后台代码
【Ajax跨域请求WebService.asmx】是一个常见的Web开发技术应用场景,主要涉及到JavaScript的Ajax技术、C#编程语言以及ASP.NET的WebService组件。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的...
AJAX跨域请求问题是在开发Web应用时经常遇到的一个问题。所谓跨域请求,指的是浏览器出于安全考虑,限制了前端JavaScript代码发起的AJAX请求只能访问与发起请求的页面同一个域下的资源。当需要从一个域名的资源请求...
### AJAX跨域请求详解 #### 一、引言 在Web开发中,由于浏览器的同源策略限制,AJAX请求通常只能向同源服务器发送请求。然而,在实际应用中,跨域请求的需求非常常见。本篇文章将通过一个具体的示例(JSP页面+后台...
这个"ajax跨域请求demo.zip"压缩包提供了一个关于如何实现Ajax跨域请求的示例,涉及到前后端的交互。 首先,我们关注"前端代码"部分。前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是...
当使用AJAX进行跨域请求时,我们需要采取特殊的方法来规避同源策略。这里将详细讲解如何通过jQuery的AJAX实现跨域请求。 首先,了解什么是CORS(Cross-Origin Resource Sharing,跨源资源共享)。CORS是一种机制,...
4. AJAX跨域: AJAX本身不支持跨域,但是通过CORS(Cross-Origin Resource Sharing,跨源资源共享)机制,可以实现AJAX的跨域请求。服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许指定的源进行...
1. **AJAX跨域**: 通常,AJAX请求受到同源策略限制。为实现跨域,我们可以使用CORS(Cross-Origin Resource Sharing)机制。服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许特定的源进行跨域访问...
总的来说,JSONP是Ajax跨域请求的一种实用解决方案,尤其适用于只支持GET请求且不涉及复杂交互的场景。但是,它也有一些局限性,比如不支持POST请求、无法控制HTTP头部、无错误处理机制等。因此,在现代Web开发中,...
本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...
6. **Domain属性(仅限子域)**:在cookies中设置`domain`属性可以实现跨子域共享,但这仅限于同一主域下的子域名之间,对AJAX跨域请求帮助有限。 在实际应用中,开发者通常根据项目需求和服务器环境选择合适的跨域...
在这里,我们将探讨如何利用jQuery Mobile和Ajax实现跨域请求。 首先,理解什么是跨域请求。由于浏览器的安全策略,JavaScript通常被限制在同源策略之下,即只能访问与当前页面相同协议、域名和端口的资源。但有时...
今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题。于是想用代理的方式来解决这个跨域问题。 什么是跨域?简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他...
### Ajax跨域问题及其解决方案 #### 一、Ajax跨域问题概述 在现代Web开发中,前后端分离架构越来越流行。这种模式下,前端页面与后端服务通常部署在不同的服务器上,甚至可能位于不同的域名下。当浏览器发起对不同...
【标题】"Ajax跨域请求调用WebService接口"是一个关键的技术点,主要涉及到Web开发中的异步数据交互和跨域安全策略。在Web应用程序中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况...