使用AJAX和JSP查询MySQL数据库

时间:2012-11-28 21:09:20

标签: mysql ajax jsp

基本上,我有一个textarea,用户可以在其中输入MySQL查询,例如SELECT * FROM table_names。需要运行查询,并且需要将结果加载到选择字段中。我尝试了各种方法,但都没有成功,任何建议去做这件事都将非常感激。

mainInterface.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ page language="Java" import="java.sql.*" %>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%! 
String gUser;
String gDatabase;
String gPassword;
String gUrl;
String gUrlFront;
String gUrlBack;
%>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <link href="main_canvas.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="tabview.css" />
        <link rel="stylesheet" href="css/jquery.treeview.css" />

        <script type="text/javascript" src="tabview.js"></script>

        <script src="js/jquery-1.4.min.js" type="text/javascript"></script>
        <script src="js/jquery.cookie.js" type="text/javascript"></script>
        <script src="js/jquery.treeview.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!

    try
        {
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
    } 
        catch (e)
        {
            // Internet Explorer Browsers
            try
            {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } 
            catch (e) 
            {
        try
                {
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
                catch (e)
                {
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
        }
            }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function()
        {
            if(ajaxRequest.readyState == 4)
            {
                document.getElementById("boxx").innerHTML= "<option>" + ajaxRequest.responseText + "</option>";
            }
    }
    var age = 1;
    var wpm = 3;
    var sex = 5;
    var queryString = "?dsname=" + gDatabase + "&user=" + gUser + "&pass=" + gPassword + "&u1=" + gUrlFront + "&u2=" + gUrl + "&u2=" + gUrlBack ;
    ajaxRequest.open("GET", "exeQuery.jsp" + queryString, true);
    ajaxRequest.send(null); 
}

//-->
</script>
        <script type="text/javascript">
            $(function() {
                $("#tree").treeview({
                    collapsed: true,
                    animated: "medium",
                    control:"#sidetreecontrol",
                    prerendered: true,
                    persist: "location"
                });
            })  

            function myFunction()
            {

            }
        </script>
        <style type="text/css">
            html, body
            {
                height: 99%;
                width:99%;
                background-color:black;
            }
        </style>
    </head>

    <body>
            <div class="main_body_container" >  <!--Start Main Body-->

                <div class="main_body_container_left"><!--Start Left Pane-->

<jsp:useBean id="NinGoo" scope="session" class="NinGoo.beancode" />
<%
    ResultSet rs = null;    
    Connection conn = null;

        String database = request.getParameter("dsname");
        gDatabase = database;
        String urlfront = "jdbc:mysql://";
        gUrlFront = urlfront;
        String url = request.getParameter("url"); // localhost:3306
        gUrl = url;
        String urlback = "/";        
        gUrlBack = urlback;
        String username = request.getParameter("user");
        gUser = username;
        String password = request.getParameter("password");
        gPassword = password;


        NinGoo.setDsname(database);
        NinGoo.setURL(urlfront + url + urlback);
        NinGoo.setusername(username);
        NinGoo.setpassword("");

        conn = NinGoo.getConnection();
        rs = NinGoo.executeSQL( "SELECT DISTINCT TABLE_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA=" + "'" + database + "'"); 

        String result; 
%>

                    <div id="sidetree">

                        <ul class="treeview" id="tree" >
                <h1>LOGO HERE </h1>
                            <li class="expandable"><div class="hitarea expandable-hitarea"></div><span><strong><b><%=database %> (DSNAME)</b> </br></strong></span>

                                <ul style="display: none;">

<%
    while (rs.next())
    {
        result = rs.getString("TABLE_NAME");

%>

                                    <li class="expandable"><div class="hitarea expandable-hitarea"></div><span><strong><%=result%></strong></span>

                                        <ul style="display: none;">

<%
        ResultSet columnNames = null;
        String colName;
        String colType;
        columnNames = NinGoo.executeSQL("SELECT COLUMN_NAME, COLUMN_TYPE FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA='" + database + "'" + "AND TABLE_NAME='" + result + "'");

        while(columnNames.next())
        {
            colName = columnNames.getString("COLUMN_NAME");
            colType = columnNames.getString("COLUMN_TYPE");

%>
            <table>
            <li><tr><td style="width:60px;"><%=colName%></td><td style="width:20px;"></td><td align="left" style="width:100px;white-space: nowrap;"><%=colType%></td></tr></li>
            </table>
<%
        }
%>
                                        </ul> 
                                    </li>    
<%
    }
%>                            
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div><!--End Left Pane-->

                <div class="main_body_container_right">    <!--Start Right Pane-->
                    <div class="TabView" id="TabView">  <!--Start Tabs Section-->
                         <div class="Tabs" style="width: 400px;"><!--Start Tabs-->
                            <a>Construct Cube</a>
                            <a>Explore Cube</a>
                        </div><!-- End Tabs-->
                        <div class="Pages"> <!--Begin Pages Content-->

                            <div class="Page"> <!-- *** Page1 Start *** -->
                                 <div class="Pad"><!-- Page 1 Start Pad-->
                                        <button onclick="ajaxFunction()" style="float:left;"> Execute Query </button>

                                        <textarea style="float:left;height:400px;width:1000px;resize:none;border: solid black 2px;"> </textarea>


                                        <b style="padding-left:30%; padding-top:20px;">Cube Name </b>
                                        <input id="cubeName" type="text" size="65" style="border:solid black 1px"/>
                                        <table>
                                            <tr>
                                                <td style="height:30px;">
                                                    <!--Empty Cell Used For Alignment-->
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="height:30px;">
                                                    <!--Empty Cell Used For Alignment-->
                                                </td>
                                                <td>
                                                    <button id="dim">Add Dimension</button>
                                                </td>

                                                <td>
                                                    <button>Choose Column</button>
                                                </td>

                                                <td>
                                                    <!--Empty Column Used For Alignment-->
                                                </td>

                                                <td>
                                                    <button>Granularity</button>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td style="width:50px;">
                                                    <!--Empty Column Used For Alignment-->
                                                </td>
                                                <tr>
                                                    <td style="height:100px;">
                                                        <!--Empty Cell Used For Alignment-->
                                                    </td>
                                                    <td style="width:200px;;">
                                                        <select size="5" name="selectionField" multiple="yes" > 
                                                            <option >Will List Dimensions</option>
                                                        </select>
                                                    </td>
                                                    <td >
                                                        <select id="boxx" style="width:200px;" name="selectionField" multiple="yes" > 
                                                            <option >Will List Columns</option>
                                                        </select>
                                                    </td>
                                                    <td align="center" style="width:100px;">
                                                        <button> --> </button>
                                                    </td>
                                                    <td>
                                                        <select size="5" name="selectionField" multiple="yes" > 
                                                            <option >Will List Granularity</option>
                                                        </select>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td style="height:30px;">
                                                        <!--Empty Cell Used For Alignment-->
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height:60px;">
                                                        <!--Empty Cell Used For Alignment-->
                                                    </td>
                                                    <td>
                                                        <button>Aggregate</button>
                                                    </td>

                                                    <td>
                                                        <button>Choose Column</button>
                                                    </td>

                                                    <td>
                                                        <!--Empty Column Used For Alignment-->
                                                    </td>

                                                    <td>
                                                        <button>Measures</button>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="width:50px;">
                                                        <!--Empty Column Used For Alignment-->
                                                    </td>

                                                    <td style="width:200px;;">
                                                        <select size="5" name="selectionField" multiple="yes" > 
                                                            <option >Will List Aggregate </option>
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <select size="5" name="selectionField" multiple="yes" > 
                                                            <option >Will List Columns</option>
                                                        </select>
                                                    </td>
                                                    <td align="center" style="width:100px;">
                                                        <button> --> </button>
                                                    </td>
                                                    <td>
                                                        <select size="5" name="selectionField" multiple="yes" > 
                                                            <option >Will List Measures</option>
                                                        </select>
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td style="height:50px;">
                                                        <!--Empty Column Used For Alignment-->
                                                    </td>
                                                    <td align="center" colspan="4">
                                                        <button style="padding-left:25px; padding-right:25px;"> Save Cube </button>
                                                    </td>
                                                </tr>
                                        </table>                            
                                 </div> <!--End Page1 Pad -->
                            </div> <!--End Page 1 -->

                            <div class="Page"> <!-- *** Page2 Start *** -->
                                 <div class="Pad"><!-- Page2 Start Pad-->
                                 </div> <!--End Page2 Pad -->
                            </div> <!--End Page 2 -->

                        </div> <!--End Pages -->
                    </div><!--End TabView -->
                </div><!--End Right Pane-->

            </div> <!--End Main Body-->


        <script type="text/javascript">
            tabview_initialize('TabView');
        </script>

    </body>
</html>

    <%-- 
    Document   : exeQuery.jsp
    Created on : Nov 28, 2012, 3:07:13 PM
    Author     : Raymond
--%>

exeQuery.jsp

<%@ page language="Java" import="java.sql.*" %>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE html>
<jsp:useBean id="NinGoo" scope="session" class="NinGoo.beancode" />
<%
    ResultSet rs = null;    
    Connection conn = null;

        String database = request.getParameter("dsname");
        String urlfront = "jdbc:mysql://";
        String url = request.getParameter("u2"); // localhost:3306
        String urlback = "/";        
        String username = request.getParameter("user");
        String password = request.getParameter("pass");



        NinGoo.setDsname(database);
        NinGoo.setURL(urlfront + url + urlback);
        NinGoo.setusername(username);
        NinGoo.setpassword("");

        conn = NinGoo.getConnection();
        rs = NinGoo.executeSQL( "SELECT DISTINCT TABLE_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA=" + "'" + database + "'"); 


        String result = null; 

        while (rs.next())
        {
            result = rs.getString("TABLE_NAME");
        }

        out.print(result);
%>

1 个答案:

答案 0 :(得分:0)

您应该只创建一个Servlet,使用AJAX发布到它,然后从查询中发回信息并填充您的选择字段。如果你不想在JS中写很多东西,我建议你用Servlet中的名字和所有东西创建字段并将它发送回AJAX对象。然后,您只需添加返回页面中元素的内容即可。

编辑:你永远不应该使用JSP来执行你的查询。