jsonp解决ajax跨域问题!

我不是女神ヾ 2022-08-04 08:51 181阅读 0赞

利用jsonp解决ajax跨域问题:(至于success里面的操作可以忽略:)

某工程下ajax请求代码:

var isVisible = true;
    	function getLog() {
    		if(isVisible)　{
    			isVisible = false;
    			//先删除数据 
    			$(".table_tr").remove();
    			$(".nav-content").html("");
    			$("#nav-btn").html("");
    			//显示页面的时候要添加数据 
    			$.ajax({
    				url : "http://192.168.1.103:8080/DataAcquisition/set/getlog", 
    				type : "GET",
    				async : false,
    				data : "callback=?" + "&currentPageNum=" + 1, //随便加个callback参数，这里没有影响
    				dataType: 'jsonp',  //类型
        			jsonp: 'callback', //jsonp回调参数，必需
    				success : function(data) {
    					 $.each(data.datas, function(index, TaskLog) {  
    					 	$(".log_locate").append("<div class='table_tr'><div class='table_td'>"+ TaskLog.targetUrl+"</div><div class='table_td'>"+ TaskLog.captureSet + "</div><div class='table_td'>" + TaskLog.matName +"</div><div class='table_td'>" + TaskLog.date +"</div><div class='table_td'>10</div></div>");
                   		 });  
                   		 var startPage = data.startPage;
                   		 var endPage = data.endPage;
                   		 //拼接 导航 按钮 和 数据 总数 内容 
                   		 $(".nav-content").append("当前共"+ data.totalPage +"页,每页最多"+ data.pageSize +"条记录");
                   		 if(data.currentPageNum == 1) {
                   		 	$("#nav-btn").append("<li><<</li>");
                   		 	$("#nav-btn").append("<li><</li>");
                   		 } else {
                   		 	$("#nav-btn").append("<a href='javascript:void(0)' οnclick='changePage("+1+")'><li><<</li></a>");
                   		 	$("#nav-btn").append("<a href='javascript:void(0)' οnclick='changePage("+ (data.currentPageNum-1) +")'><li><</li></a>");
                   		 }
                   		 
                   		 
                   		 for(var pageNum = startPage; pageNum <= endPage; pageNum++) {
                   		 	//如果是当前的页数 ，添加 按钮背景 颜色 
                   		 	if(pageNum == data.currentPageNum) {
                   		 		$("#nav-btn").append("<a href='javascript:void(0)' οnclick='changePage("+pageNum+")'><li class='page-button-bg'>"+pageNum+"</li></a>");
                   		 	} else {
                   		 		$("#nav-btn").append("<a href='javascript:void(0)' οnclick='changePage("+pageNum+")'><li>"+pageNum+"</li></a>");
                   		 	}
                   		 }
                   		 
                   		 if(data.currentPageNum == data.totalPage) {
                   		 	$("#nav-btn").append("<li>></li>");
                   		 	$("#nav-btn").append("<li>>></li>");
                   		 } else {
                   		 	$("#nav-btn").append("<a href='javascript:void(0)' οnclick='changePage("+ (data.currentPageNum+1)+")'><li>></li></a>");
                   		 	$("#nav-btn").append("<a href='javascript:void(0)' οnclick='changePage("+data.totalPage+")'><li>>></li></a>");
                   		 }
                        		 
    				},
    				error : function() {
    					alert("系统异常!");
    				}
    			});
    			//显示页面 
    			$(".show-log-table").css("visibility","visible");	
    		} else {
    			isVisible = true;
    			$(".show-log-table").css("visibility","hidden");
    		}

另一工程controller(这里使用的是spring mvc):

@RequestMapping(value="/getlog", method = RequestMethod.GET)
    	public void getLog(PageBean<TaskLog> pageBean, HttpServletResponse response, String callback) throws IOException {
    		PrintWriter out = response.getWriter();
    		TaskLogDao taskLogDao = DaosFactory.getInstance().createDao("com.dataacquisition.dao.impl.TaskLogDaoImpl");
    		PageBean<TaskLog> resultPageBean = taskLogDao.getPageBean(pageBean);
    		//这里特别注意,格式需要严格遵守
    		String resultJsonStr = callback + "(" + JSON.toJSONString(resultPageBean) + ");";
    		out.write(resultJsonStr);
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关深入浅出JSONP--解决ajax跨域问题

取不到数据！　　上周客户新买了服务器，原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net)，在客户的主页中有一个动态显示最新消息的处理，这个处理就

￡神魔★判官ぃ/ 2022年09月20日 11:25/ 0 赞/ 325 阅读

相关解决ajax跨域问题-深入浅出JSONP

问题描述：Ajax怎么无法获取另一个网站的最新消息呢,这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？这是因为所有支持Javascript的浏览器都会使用同

Myth丶恋晨/ 2022年08月26日 14:10/ 0 赞/ 201 阅读

相关 Jsonp解决ajax跨域问题

一、介绍 > 最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份

ゝ一纸荒年。/ 2022年08月22日 14:21/ 0 赞/ 242 阅读

相关 jsonp解决ajax跨域问题

“已阻止交叉源请求：同源策略不允许读取…” jsonp的基本的原理是:动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。 (也就是可以

拼搏现实的明天。/ 2022年08月05日 19:27/ 0 赞/ 204 阅读

相关 jsonp解决ajax跨域问题!

利用jsonp解决ajax跨域问题:(至于success里面的操作可以忽略:) 某工程下ajax请求代码: var isVisible = true; f

我不是女神ヾ/ 2022年08月04日 08:51/ 0 赞/ 182 阅读

相关 JSONP解决跨域问题

JavaScript规范中提到的json是不能直接跨域调用，为了安全，但是能调用js片段，所以把json包装为一个js片段，也就是jsonp那么就能够跨域请求

梦里梦外;/ 2022年06月13日 22:57/ 0 赞/ 310 阅读

相关 jsonp解决Ajax跨域问题

什么是跨域？ 1、域名不同。 2、域名相同，端口不同。

﹏ヽ暗。殇╰゛Y/ 2022年06月06日 13:42/ 0 赞/ 253 阅读

相关 JSONP解决跨域问题

转自：http://blog.csdn.net/u014607184/article/details/52027879 要理解跨域，先要了解一下“同源策略”。所谓同源是指，域

墨蓝/ 2022年05月30日 22:40/ 0 赞/ 277 阅读

相关 Jsonp解决ajax跨域问题

一、介绍 > 最近跨域问题比较多，而且自己刚好也看到这一块，就总结了一下，关于JSONP的东西百度的话东西确实很多，很多人都是复制别人的，如此下去，其实找的资料就那么几份

ゞ浴缸里的玫瑰/ 2022年05月20日 01:05/ 0 赞/ 321 阅读

相关 ajax jsonp-script跨域问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

旧城等待，/ 2021年07月24日 11:12/ 0 赞/ 442 阅读