【js+ajax】点击按钮，从后台加载数据库，动态给select下拉框增加option选择值。

这个问题，搞了很久，不是难，而是乱七八糟的问题太多。

直接贴简洁的代码：

在里增加Jquery的引用：

html部分：点击刷新课程时，将当前的“请选择”去除，并且新增N条记录作为可选项。

    

        


        课程1
        
            请选择
        


        课程2
        
            请选择
        

    
    

同一html页面的JS部分：使用ajax的方法增加下拉框，注意多用alert以及tomcat的输出框来判断程序走到ajax的哪一步了。

后台servlet返回数据的部分。分三块。

在使用前要导入6个jar包，可以直接在下载搜索，具体名单：

需引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：

      1.commons-lang.jar

      2.commons-beanutils.jar

      3.commons-collections.jar

      4.commons-logging.jar 

      5.ezmorph.jar

      6.json-lib-2.2.2-jdk15.jar

这几个包是用来调用JSONArray的。论坛不能折叠代码我也是服了。

@WebServlet(name = "AddSR_ReadCourseName",value = "/AddSR_ReadCourseName")
public class AddSR_ReadCourseName extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = null;
        Course couseName = new Course();

        ReceiveCourse RC = new ReceiveCourse();
        ArrayList list = RC.getCourses();
        //pack the list in jsonArray
        if (list == null) {
            request.setAttribute("error", list.getClass() + "读取为空，需要修改");
            request.getRequestDispatcher("/Views/FailureOperaon.jsp").forward(request, response);
        }
        //转换
        JSONArray jsonDocumentList = JSONArray.fromObject(list);
        //这个输出可以在tomcat的输出框中显示取得的值，用于测试
            System.out.println("【AddSR_ReadCourseName】最终得到结果："+jsonDocumentList.toString());
        out = response.getWriter();
        out.println(jsonDocumentList);
        out.flush();
        out.close();
    }

Course文件里是几个属性：id、name。直接private封装后get and set即可。

就不贴这个文件的代码了。

还有一个ReceiveCourse ,里面主要是来向mysql调用存储方法来获得返回数据的，返回结果为List形式。

public class ReceiveCourse {
    public ArrayList getCourses() {
        CallableStatement call = null;
        ResultSet rs;
        ArrayList arrayList = new ArrayList();
        try {
            Context context = new InitialContext();
            Context envContext = (Context) context.lookup("java:comp/env/");
            DataSource ds = (DataSource) envContext.lookup("jdbc/testDS");
            Connection conn = ds.getConnection();
            //upper part used to set up connection
            call = conn.prepareCall("{call select_course_name_None}");
            rs = call.executeQuery();
            if (rs == null) {
//                request.setAttribute("error", rs.getClass() + "读取为空，需要修改");
//                request.getRequestDispatcher("/Views/FailureOperaon.jsp").forward(request, response);
                arrayList = null;
            } else {
                while (rs.next()) {
                    Course course = new Course();
                    course.setCourseName(rs.getString(1));
                    arrayList.add(course);
                }
            }
            rs.close();
            call.close();

        } catch (NamingException | SQLException e) {
            e.printStackTrace();
        }
        return arrayList;
    }
}

需求解决。