div+ajax代替iframe

来源：互联网发布：淘宝旧版本4.0.0下载编辑：程序博客网时间：2024/05/01 14:43

对于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里展现带数据的页面。

0 0