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

最新推荐文章于 2024-07-23 20:31:08 发布

TaoiR

最新推荐文章于 2024-07-23 20:31:08 发布

阅读量6.3k

点赞数 5

分类专栏： javaweb

本文链接：https://blog.csdn.net/qq_40245756/article/details/86009950

版权

javaweb 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

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

直接贴简洁的代码：

在<head>里增加Jquery的引用：

<script  src="/jQuery/jquery.min.js"></script>

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

<form action="/AddStudentRecord" mothod="post">
    <div>
        <input type="button" onclick="ADDSelectOption()" value="刷新课程"><br/>

        <label>课程1</label>
        <select name="course1" id="course1" >
            <option selected value="">请选择</option>
        </select><br/>

        <label>课程2</label>
        <select name="course2" id="course2">
            <option selected value="">请选择</option>
        </select><br/>
    </div>
    <input type="submit" value="提交">

</form>

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

<script type="text/javascript">
    /*这个方法用于在加载页面时读取后台并增加select的选择数*/
    function ADDSelectOption()
    {
            //将两个下拉框清空
            $("#course1").empty();
            $("#course2").empty();
            onLoadRead();
    }
    function onLoadRead()
    {
    var ajaxTimeOut=
        $.ajax({
        type:"post",
        url:"/AddSR_ReadCourseName",
        dataType:"json",
        async:true,
        cache:false,//不缓存
        timeout:5000,
        success:function(data)
        {
            if(data)
            {
                //测试返回数据的正确的使用形式，删除即可
                // alert("测试:"+data[0].courseName);
                // alert("测试2:"+data.length);

                $("#course1").append("<option selected value=''>请选择</option>");
                $("#course2").append("<option selected value=''>请选择</option>");

                for(var i=0;i<data.length;i++)
                {
                    $("#course1").append("<option selected value='"+data[i].courseName+"'>"+data[i].courseName+"</option>");
                    $("#course2").append("<option selected value='"+data[i].courseName+"'>"+data[i].courseName+"</option>");
                }

                alert("data.success 成功");
            }
            else {
                alert("data.success 失败")
            }
        },
        error:function ()
        {
            alert("数据传输失败！")
        },
        complete:function (XMLHttpRequest,status)
        {
            if(status=='timeout')
            {
                //如果请求超时，则弹出提示,并取消请求
                alert("请求超时");
                ajaxTimeOut.abort();
            }
        }
        });
    }
</script>

后台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;
    }
}

需求解决。

TaoiR

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
【js+ajax】点击按钮，从后台加载数据库，动态给select下拉框增加option选择值。

这个问题，搞了很久，不是难，而是乱七八糟的问题太多。直接贴简洁的代码：在&lt;head&gt;里增加Jquery的引用：&lt;script src="/jQuery/jquery.min.js"&gt;&lt;/script&gt;html部分：点击刷新课程时，将当前的“请选择”去除，并且新增N条记录作为可选项。&lt;form action="/AddStudent...
复制链接

扫一扫

专栏目录