每日Bug--頁面加載的時候完成數據庫的查詢操作，初始化select

一、問題的引出

一個頁面：沒有登錄頁面，在第一個頁面要求用數據庫裏面的字段初始化一個select 的option

二、問題點：需要在頁面加載完成的時候，也完成 對select的賦值

三、 百度：解決方式是利用ajax 先對數據庫進行一次查詢操作，把查到的數據，拼接到 select 的option中

四、前端的代碼 記得需要 引入 jQuery

 $(function () {
        $.ajax({
            url:'GetCategorySer',
            type:"get",
            dataType:"text",
            success:function (data) {
                let strs=data.split(",");

                for (let i=0;i<strs.length;i++){
                    //下面的是js 的方式，這個和整體的 jQuery 矛盾 不可以使用
                    // $("#typeSelector").append("<option value='"+i+">"+strs[i]+"</option")
                    //下面的是 jQuery 的方式
                    $("#typeSelector").append("<option value='"+strs[i]+"'>"+strs[i]+"</option>");

                }


            }
        })
    })

五、後端的代碼

//	調用數據的方法
        EdocCategoryService edocCategoryService=new EdocCategoryServiceImpl();
        List<EdocCategory> allEdocEntryTypes = edocCategoryService.getAllEdocEntryTypes();

//獲取一個 writer 對象
        PrintWriter writer = resp.getWriter();

//下面代碼的意圖是 輸出需要的字符串，以 逗號 隔開
        for (int i=0;i<allEdocEntryTypes.size()-1;i++){
//            System.out.println(allEdocEntryTypes.get(i).getName()+",");
            writer.print(allEdocEntryTypes.get(i).getName()+",");
        }
        writer.print(allEdocEntryTypes.get(allEdocEntryTypes.size()-1).getName());
//        System.out.println(allEdocEntryTypes.get(allEdocEntryTypes.size()-1).getName());

六、總結分析

舉例：數據庫中的商品種類有 水果，服裝，家電；前臺的一個 select中需要 這三個屬性 作爲 option 顯示；
但是 要求是查數據庫所得，而不是寫死的；
這個時候，後臺查出來的是一個字符串

"水果,服裝,家電"

傳遞到前臺之後，前端代碼中
1）ajax success:執行的回調函數 中的 data 就是這個字符串
2）利用 js的分割字符串的方式，分割得到三個字符串
3）利用 js 把option動態的拼接到 select 中
拼接的方式有多中，此處只 是使用了一種