Easyui Tree跨域获取数据。
来源:互联网 发布:mac如何设置用户头像 编辑:程序博客网 时间:2024/05/18 03:26
js语言为了安全,是不允许跨域访问数据的。有时候因为项目需要,我们需要从不同的域中获取数据,当然是有解决方法的。JSONP,是JSON with padding(填充式JSON或参数式JSON)的缩写,JSONP看起来和JSON差不多,只不过是被包含在函数调用中,类似这样
callback({"name":"mike"});
JSONP由两部分组成:回调函数和数据。
回调函数是当响应到来是应该在页面中调用的函数,函数一般在请求中指定。
数据就是传入回调函数中的JSON数据。下面就是一个JSONP请求:
http://127.0.0.1/json/?callback=handleResponse
这里指定的回调函数就是handleResponse();
Jquery提供了$.getJSON(),来进行跨域访问数据。
下面看具体的代码
前台代码
$.getJSON("http://localhost:8082/treeData?callback=?",function(treeData){ console.log("进入getJSON"); console.log(treeData); $("#tt").tree({ data:treeData, onSelect:function(node){ $(this).tree('expand',node.target); } }); });
后台,在不同的域中
@RequestMapping(value="treeData",produces=MediaType.APPLICATION_JSON_VALUE+";charset=utf-8") @ResponseBody public String getData(String callback){ List<Tree> resultData = resultData(0); //封装的一个方法,将List转换为String String jsonString = JsonUtils.objectToJson(resultData); //获取树的数据 //拼接成JSONP格式返回 return callback+"("+jsonString+");"; } /** * 生成树 * @param parentId * @return */ public List<Tree> resultData(long parentId){ //根据根节点id获取子节点数据 List<TbItemCat> topList = tbItemCatMapper.getItemList(parentId); List<Tree> resultTree=new ArrayList<Tree>(); //遍历子节点 for (TbItemCat tbItemCat : topList) { Tree tree=new Tree(); tree.setId(tbItemCat.getId()); tree.setText(tbItemCat.getName()); //判断是否有子集 if (tbItemCat.getIsParent()) { tree.setState("closed"); //递归获取数据 tree.setChildren(resultData(tbItemCat.getId())); resultTree.add(tree); }else { resultTree.add(tree); } } return resultTree; }
这样就可以完成跨域获取数据的方法了。
前台还可以使用$.ajax()的方式来获取数据。
$.ajax({ type:'POST', url:'http://localhost:8082/treeData?abc=fun1', dataType:'jsonp', jsonpCallback:'fun1', success:function(data){ console.log(data); }, error:function(data){ console.log("error"); console.log(data); } });//定义回调函数,获取后到达客户端会立刻执行function fun1(resultData){ //返回来之后立即执行 datas=data; console.log("进入fun1"); console.log(data); $("#tt").tree({ data:resultData }); }
一样是可以成功返回数据的。
欢迎交流讨论QQ:425548678
1 0
- Easyui Tree跨域获取数据。
- easyui-tree动态获取
- easyui tree 显示数据
- easyui获取subgrid数据
- EasyUi Tree 数据 对象 递归
- easyui-tree动态获取后台数据成为书结构的操作
- easyUI获取tree的数据对象,啊啊啊啊啊啊啊啊啊啊啊啊
- EasyUI tree扩展获取实心节点
- EasyUI tree扩展获取实心节点
- EasyUI tree扩展获取实心节点
- easyUI,tree,获取一级子节点
- easyui tree 获取树的深度
- EasyUI Tree递归方式获取JSON
- easyUI获取tree、combotree节点级别
- 怎样在easyUi里面获取到easyui-tree
- easyui 获取combox数据textField
- EasyUI datagrid获取一行数据
- EasyUI datagrid 获取全部数据
- 仿淘宝详细页面图片放大镜的制作过程
- Effective-Java-Note-类和接口
- JavaSE总结-集合框架-List
- 搜索引擎技术之概要预览
- uml类图详解
- Easyui Tree跨域获取数据。
- jQuery从0开始之【二】jQuery使用原则及常用事件
- java读取文件以字节流的形式读取 然后转化为字节流数组,最后经过SHA1加密生成返回16进制字符串存入数据库
- JDBC学习笔记
- 什么是尾递归
- js判断是否 是移动浏览网站还是pc浏览网站,跳到对应的网页
- Java安装与编程
- 1020. 月饼
- 巧用Snackbar代替Toast