How to dynamically populate the drop down list in my JSP page from the database?

Question

I am working with JSP and Ajax for the first time. I am trying to get one column data from database and populate it in my drop down list in my JSP page using Ajax call. I don't want to refresh the page so that is the reason, I am making aN Ajax call.

Here is my jsfiddle which has Process button and as soon as I click Process button, it will show an empty drop down list as of now. This is in my another test.jsp page.

I have a table as account and I need to make this select query from the jsp -

SELECT USERS FROM ACCOUNT;

As soon as I am clicking Process button, I need to execute above SQL query on my POSTGRESQL database using Ajax. And whatever users, I am getting back from the database, I need to populate those USERS in my drop down list as shown in my above jsfiddle.

Below is my JSP page (databasecall.jsp) in which I am making a call to my database to get all the USERS -

<%@page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.sql.*" %>
<%
    response.setContentType("application/json");

    try {
        // Step 1. Load the JDBC driver
        Class.forName("org.postgresql.Driver");

        // Step 2. Create a Connection object
        Connection con = DriverManager.getConnection(
                "jdbc:postgresql://localhost/test","root", "root!");

        Statement s = con.createStatement();

        String sql ="SELECT USERS FROM ACCOUNT";
        ResultSet rs = s.executeQuery(sql);

        while (rs.next()) {
            // what to do here?
        }
        rs.close();
        s.close();
        con.close();
    } catch (Exception e3) {
        e3.printStackTrace();
    }
%>

Problem Statement:-

Now my question is, how do I populate all the USERS data which I got from the database in my drop down list in the test.jsp page? Meaning, somehow I need to call this JSP on the Process button click and then pass all the users data which we got and then dynamically populate the drop down list?

Suppose if I am getting 10 USERS from the database, then the drop down list should have 10 users in it.

Is this possible to do?

Answer 1

As you get data through Ajax call so you should populate data on Servlet .

   @WebServlet("/populate")
   public class PopulateData extends HttpServlet{

      public void doGet(....){
         Class.forName("org.postgresql.Driver");
         Connection con = DriverManager.getConnection(
            "jdbc:postgresql://localhost/test","root", "root!");

        Statement s = con.createStatement();
        String sql ="SELECT USERS FROM ACCOUNT";
        ResultSet rs = s.executeQuery(sql);

        List<String> list = new ArrayList<String>();

        while (rs.next()) {
          list.add(rs.getString("USERS"));
        }
       String json = new Gson().toJson(list);
       response.getWriter().write(json);
      }
  }

Now you can populate json data to test.jsp page through ajax call.

See also:

• How to use Servlets and Ajax?

Answer 2

Writing java code is jsp is very bad habit ,use jquery and do all DB stuff in java code

$.ajax({
                type: "POST",
                url: "URL",
                data: "firstName=Aidy&lastName=F", // the data in form-encoded format, ie as it would appear on a querystring

                success: function (data) {
                   assign the return value which is in data to your hmtl 
                }
            });