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

Question

我有一个JsonObject，它从弹簧控制器返回以填充选择框。但是我无法在 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;
}

来自弹簧控制器的 JSON 输出将如下所示 键值对：

{"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("ERRORn"+response);
console.log(response);
},
});
}) ;

注意：不要发送带有空格分隔符的键的 json。

在示例响应"数据类型 5"中，这些不是有效的 JSON 密钥。要么用下划线("TYPE_OF_DATA_5"(分隔，要么使用"camelCase"表示法来引用键

Answer 2

1st ：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
}