Easyui Treeはドメイン間でデータを取得します.

js言語は安全のため、ドメイン間でデータにアクセスすることは許されません.プロジェクトの必要性のために、異なるドメインからデータを取得する必要がある場合があります.もちろん、解決策があります.JSONPは、JSON with padding(パディングJSONまたはパラメトリックJSON)の略で、JSONPはJSONとあまり差がないように見えますが、関数呼び出しに含まれているにすぎません.

callback({"name":"mike"});

JSONPはコールバック関数とデータの2つの部分から構成されています.コールバック関数は、応答が来るとページで呼び出すべき関数であり、関数は一般的に要求で指定されます.データはコールバック関数に入力された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 resultData = resultData(0);
         //       ， List   String
         String jsonString = JsonUtils.objectToJson(resultData);
         //      
         //   JSONP    
         return callback+"("+jsonString+");";
    }

    /**
     *    
     * @param parentId
     * @return
     */
    public List resultData(long parentId){
        //     id       
        List topList = tbItemCatMapper.getItemList(parentId);
        List resultTree=new ArrayList();
        //     
        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
    }); 
}

同じようにデータを正常に返すことができます.交流討論を歓迎します