Easyui Tree跨域获取数据。

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