A Developer Gateway To IT World...

Techie Uncle Software Testing Core Java Java Spring C Programming Operating System HTML 5 Java 8 ES6 Project

Data retrieve in jsp with MySQL and fetch data in jsp page using dropdown with Ajax.

Hi! Guys I have already made database in MySql and I want to fetch data in jsp page using dropdown with Ajax.

So this is the complete code of such a project.


Click on the Menu third


Select enable from dropdown as follow:





Now, select disable from drop-down then page will be reloaded automatically:



Displaying data on jsp page from Oracle

Folder Structure and add jars in lib folder:



Now make MySql data base as follow:



Make the following jsp page:

selectData.jsp

============================================================================

<%@page import="java.sql.*"%>
<%@page import="java.io.*"%>
<%@page import="javax.servlet.ServletException"%>
<%@page import="javax.servlet.http.*"%>
<%
   String id = "";
   String name = "";
   String address = "";
   String status = "";
   String q = request.getParameter("q");
   try {
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/selectdata", "root", "root");
        Statement smt = con.createStatement(); //Create Statement to interact
        ResultSet r = smt.executeQuery("select * from info where(status='" + q + "');");
        while (r.next())
        {
           out.println(r.getString("name"));
           out.println(r.getString("address"));
           out.println(r.getString("status"));
           out.println(r.getString("id"));
           out.println("|||||||");
        }
        con.close();
   } catch (Exception e) {
        e.printStackTrace();
   }
%>



Form.jsp


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $(document).ready(function(){
                 $("#users").change(function(){
                     var value = $(this).val();
                     $.get("selectData.jsp",{q:value},function(data){
                      $("#javaquery").html(data);
                     });
                 });
             });
        </script>
    </head>
    <body>
     <%@include file="header.jsp"%>
    <h1>This example of select statement using Ajax and javaquery</h1>
        <select id = "users">
           <option value="">Select Option: status</option>
           <option value="enable">enable</option>
           <option value="disable">disable</option>
        </select>
        <br />
        <div id="javaquery"><b>Name will be displayed here</b></div>
    </body>
</html>


LEARN TUTORIALS

.

.