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