Question

我有一个JsonObject，它从spring控制器返回以填充选择框。但是我无法在Ajax中加载它

这是我的Jquery代码

$("#category").click(function(){

    $.ajax({
        type: "POST",
        url: "loadSelectBox",
        dataType: 'json',
        success: function(data){
            $("#category").empty();
            var options = '';
            for(var i = 0; i <= data.length - 1; i++){
                options += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
            }
            $("#category").append(options);
            $("#category").trigger('chosen:updated'); 
        }
    });

})

我的控制器代码是

@PostMapping(name="loadSelectBox")
    public JSONObject getCategoryJsonObj() throws Exception{
        System.out.println("loadSelectBox:::::: ");
        JSONObject catJsonObj=new JSONObject();
        try {
            ArrayList<CategoryDTO> catDTOList=globalCatList;
            System.out.println("catDTOList::: "  +catDTOList);
            ArrayList<String> dbList=rawDataProcessService.getCurrentCategoriesInserted(structureID);
            System.out.println("dbList:: "  +dbList);

            System.out.println("catDTOList before removing : "  +catDTOList.size());
            if(dbList!=null && dbList.size() >0){
                for(int db=0;db<dbList.size();db++){
                    String dbData=dbList.get(db);
                    for(int cat=0;cat<catDTOList.size();cat++){
                        CategoryDTO dto=catDTOList.get(cat);
                        String currentData=dto.getCategory();
                        if(dbData.trim().equals(currentData)){
                            catDTOList.remove(cat);
                        }

                    }
                }
                System.out.println("catDTOList after removing : "  +catDTOList.size());
                for(int cat=0;cat<catDTOList.size();cat++){
                    CategoryDTO categoryDTO=catDTOList.get(cat);
                    String categoryValue=categoryDTO.getCategory();
                    System.out.println("categoryValue: ::" + categoryValue);
                    catJsonObj.put(categoryValue, categoryValue);
                }
                System.out.println("catJsonObjLLL " +catJsonObj);
            }else{

            }
        } catch (Exception e) {
            throw e;
        }
        return catJsonObj;

    }

Spring控制器的JSONObject将如下键值对：

 {"MONTH":"MONTH","TYPE OF DATA 5":"TYPE OF DATA 5","TYPE OF DATA 3":"TYPE OF DATA 3","TYPE OF DATA 4":"TYPE OF DATA 4"}

我无法将上述jsonObject值加载到选择框中。

感谢帮助，谢谢

Answer 1

这种forloop用于迭代数据数组。在你的情况下它只是一个对象。所以迭代通过对象来检索键值对。

像这样改变你的循环

for(var key in data){
      options += "<option value='" + key + "'>" + data[key] + "</option>";
}

因此js看起来像

$("#category").click(function(){

    $.ajax({
        type: "POST",
        url: "loadSelectBox",
        dataType: 'json',
        success: function(data){
            $("#category").empty();
            var options = '';
            for(var key in data){
                options += "<option value='" + key + "'>" + data[key] + "</option>";
            }
            $("#category").append(options);
            $("#category").trigger('chosen:updated'); 
        },
        error: function(response){
            alert("ERROR\n"+response);
            console.log(response);
        },
    });
}) ;

注意：请勿使用带空格分隔符的键发送json。

在您的示例响应“TYPE OF DATA 5”中，这些是无效的json密钥。使用下划线（“TYPE_OF_DATA_5”）分开或使用'camelCase'表示法来引用密钥

Answer 2

第一名： return catJsonObj;不会将json string返回ajax。您需要返回浏览器输出，如System.out.println(catJsonObj);

return catJsonObj;

更改为

System.out.println(catJsonObj);

注意：同时删除不需要的System.out.println(..);

第二名：按照@Aneesh RS步骤设置下拉列表

Answer 3

我找到了解决方案，因为它是服务器端isse，我刚刚在我的控制器类中添加了@ResponseBody。

@PostMapping(name="loadSelectBox")
    @ResponseBody
    public JSONObject getCategoryJsonObj() throws Exception{
// Logics
}

如何使用jquery和ajax调用从JsonObject获取值？

3 个答案: