div+ajax代替iframe

最新推荐文章于 2023-06-20 11:15:17 发布

chen420

最新推荐文章于 2023-06-20 11:15:17 发布

阅读量5.1k

点赞数 1

分类专栏：职业技术笔记

本文链接：https://blog.csdn.net/chen420/article/details/24031493

版权

职业同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

技术

3 篇文章 0 订阅

订阅专栏

笔记

1 篇文章 0 订阅

订阅专栏

对于iframe的好处坏处这里不多说，大家可以看看下面这篇博客

http://blog.csdn.net/yangkai_hudong/article/details/18712623

我也是在使用iframe上遇到了一点问题，做了个wap项目，页面里用了iframe，改变它的src，可以动态加载不同的页面而不需要刷新，同时也便于父页面读取子页面的数据，挺方便。在电脑上测试没问题，但在手机上测试时，有时候按浏览器的返回键出现空白页面的情况，找了很多方法都不能有效解决。最后无奈，打算用div预先将页面加载，然后控制显示，但这个工作量很大，由于页面本身的数据已经很多，而且iframe动态变换的src也很多，这算是最笨的方法。最后想到能不能用只用一个div像iframe一样动态的改变，在网上查了下，要用ajax，然后开始修改。

但问题又来了，以前用ajax时，后台方法一直都写成的void，然后用PrintWriter向前台传数据。如果这个时候将页面的url用这种方法返回去，前台收到只是一个字符串，并不是整个页面。难道要自己拼html代码，那工作量也挺大的。网上也说可以直接返回一个页面，但这个时候还是不懂，不知道改怎么返回。然后就试试平常跳转页面的方式，直接用return一个页面，这一试，还真可以。

原来以前用ajax，写后台时，已经养成了习惯，以为只能写成void方法，现在又长知识了。直接上改后的测试代码。

<body>
	<input type="text" name="txt" id="txt">
	<input type="button" id="btn" value="获取">
	<div style="border:1px solid black;width:100%;height:100%" id="div"></div>
</body>
<script>
$("#btn").click(function(){
	$.ajax({
		type:"POST",
		url:"http://localhost:8088/datamonitor/weatherdata/test",
		data:{txt:$("#txt").val()},
		dataType:'text',
		error: function(){alert('error');},
		success:function(data){
			$("#div").html(data);
		}
	});
});
</script>

@RequestMapping("test")
	public String test(String txt, Model model) {
		List<Object[]> list= new ArrayList<Object[]>();
		list.add(new Object[]{"你好","hello"});
		list.add(new Object[]{"成功","success"});
		model.addAttribute("list", list);
		return txt;
	}

在输入框输入页面名称（不带.jsp），点击获取就可以直接在div里展现带数据的页面。