如何使用jquery和ajax調用從JsonObject獲取值？

我有一個從彈簧控制器返回的JsonObject來填充選擇框。但我不能將其加載到阿賈克斯如何使用jquery和ajax調用從JsonObject獲取值？

這裏是我的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; 

    }

的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值加載到選擇框中。

幫助表示讚賞，那種for循環是用來通過data.In的情況下，它只是一個object.So遍歷的對象檢索鍵值對的數組迭代感謝

來源

2017-07-27 eThan_hunT

可以顯示阿賈克斯 – JYoThI

我沒有得到響應數據的響應JSON數據，看起來像在阿賈克斯它不是成功 –

添加錯誤處理程序來獲取錯誤信息 – JYoThI

。

更改對循環這樣

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。

在你要跟樣本響應「DATA 5類型」這些都不是有效的JSON keys.Either用下劃線（「TYPE_OF_DATA_5」）分離，或使用「駝峯」符號用於參考鍵

來源

2017-07-27 04:35:47

我已經按照上面所說的完成了，但仍然收到404錯誤，並且選擇框未加載 –

檢查您的回覆。 404是頁面未找到error.Which由server.add拋出一個錯誤塊來顯示響應。 –

儘管我沒有得到預期的結果 –

第一：return catJsonObj;不會返回json string至ajax。你需要返回瀏覽器輸出像System.out.println(catJsonObj);

return catJsonObj;

變化

System.out.println(catJsonObj);

注：還刪除不需要的System.out.println(..);

第二：按照@Aneesh RS步驟poppulate下拉

來源

2017-07-27 04:45:49 JYoThI

我找到了解決方案，因爲它是服務器端ISE，我剛在我的控制器類中添加了@ResponseBody。

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

來源

2017-07-27 06:00:12

如何使用jquery和ajax調用從JsonObject獲取值？

回答

相關問題