Question

我正在写一个网络应用程序。首先，我将解释这个过程，然后是代码，最后是问题。

我有两个相同的jsps，index.jsp和GetCaseData.jsp

这里有2个按钮，一个在顶部，另一个在底部。最初，第二个按钮被禁用

当我点击获取案例按钮时。来自数据库的数据被提取到文本框（GetCaseData.jsp），并且提交框被启用并且getcase被禁用。

当我点击提交时，数据会保存到DB中的另一个表

以下是代码。

的index.jsp

<%@page import="org.bean.UserBean"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="myCssFile.css">
<title>Insert title here</title>
<script type="text/javascript">
    function enableSubmit() {
        document.getElementById("getCase").disabled = true;
        document.getElementById("submitButton").disabled = false;
    }
    function enableGetCase() {
        document.getElementById("getCase").disabled = false;
        document.getElementById("submitButton").disabled = true;
    }
</script>
</head>
<body>
    <div class="header" id="header">
        <form id="form1"></form>
    </div>

    <div class="bodytag">
        <form method="get" action="GetData">
            <input type="Submit" value="Get Case" name="getCase" id="getCase"
                onclick="enableSubmit()" />
            <table>

                <tr>
                    <td>Case Number</td>
                    <td><input id="Text1" type="text" value="" /></td>

                    <td>Case Owner</td>
                    <td><input id="Text6" type="text" value="" /></td>
                </tr>
                <tr>
                    <td>Source</td>
                    <td><input id="Text2" type="text" /></td>
                    <td>Status</td>
                    <td><input id="Text7" /></td>
                </tr>
                <tr>
                    <td class="auto-style2">Issue</td>
                    <td class="auto-style2"><input id="Text3" value="" type="text" /></td>
                    <td class="auto-style2">Reason</td>
                    <td class="auto-style2"><input id="Text8" value="" type="text" /></td>
                </tr>
                <tr>
                    <td>Date/Time Opened</td>
                    <td><input id="Text4" type="text" value="" /></td>
                    <td>Age(Days)</td>
                    <td><input id="Text10" type="text" value="" /></td>
                </tr>
                <tr>
                    <td>Resolution</td>
                    <td><select id="Select1" name="D1">
                            <option></option>
                    </select></td>
                    <td>Final Status</td>
                    <td><select id="Select2" name="D2">
                            <option value="     "></option>
                    </select></td>
                </tr>
                <tr>
                    <td>Start Time</td>
                    <td><input id="Text5" type="text" value="Start Time" /></td>
                    <td>End Time</td>
                    <td><input id="Text9" type="text" value="end Time" /></td>
                </tr>
            </table>
            <input type="button" value="Submit" name="submitButton"
                id="submitButton" disabled="disabled" onClick="enableGetCase()" />
        </form>
    </div>
    <script type="text/javascript" src="SampleJS.js"></script>
</body>

的Servlet

package org.servlet;

import org.DAO.*;
import org.bean.UserBean;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/GetData")
public class GetData extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public GetData() {
        super();
    }

    GetDataDAO getdatadao = null;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // set content type

        try {
            getdatadao = new GetDataDAO();
            List<UserBean> userBeans = getdatadao.list();
            request.setAttribute("userBeans", userBeans);
            request.getRequestDispatcher("GetCaseData.jsp").forward(request, response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

GetDataDAO

package org.DAO;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import org.bean.UserBean;
import org.code.general.DBConnection;

public class GetDataDAO {
    DBConnection dbConnection = new DBConnection();

    public List<UserBean> list() throws Exception {
        List<UserBean> userBeans = new ArrayList<UserBean>();
        try {

            String userName = new com.sun.security.auth.module.NTSystem().getName();
            System.out.println(userName);
            Connection conn = dbConnection.getConn();
            Statement stmt = dbConnection.getStmt();
            ResultSet rs = dbConnection.getRs();
            String excelPath = dbConnection.getExcelPath();
            String queryString = null;
            dbConnection.createClassForNameForExcel();
            conn = DriverManager.getConnection(
                    "jdbc:odbc:Driver={Microsoft Excel Driver (*.xls)};DBQ=" + excelPath + "; READONLY=FALSE;");
            System.out.println("Connecting to database…");
            System.out.println("Oracle JDBC Driver Registered!");
            if (conn != null) {
                System.out.println("You made it, take control your database now!");
            } else {
                System.out.println("Failed to make connection!");
            }
            stmt = conn.createStatement();
            queryString = "Select * from [report1448039568905$] where STATE IS NULL";
            rs = stmt.executeQuery(queryString);
            ResultSetMetaData rsmd = rs.getMetaData();
            // int rowCount = rsmd.getColumnCount();
            System.out.println("bno of cols are " + rsmd.getColumnCount());

            while (rs.next()) {
                UserBean userBean = new UserBean();
                userBean.setCaseNumber(rs.getString(1));
                userBean.setCaseOwner(rs.getString(2));
                userBean.setStatus(rs.getString(4));
                userBean.setIssue(rs.getString(5));
                userBean.setReason(rs.getString(6));
                userBean.setDateOpened(rs.getString(7));
                userBean.setAge(rs.getInt(8));
                userBeans.add(userBean);
            }
            rs.close();
            conn.commit();
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return userBeans;
    }
}

SampleJS.js

$(window).load(
        function() {
            $("#form1").on(
                    'submit',
                    function(e) {
                        $.ajax({
                            type : "get",
                            url : "GetTheCounts",
                            data : $(this).serialize(),
                            success : function(msg) {
                                console.log(JSON.stringify(msg));
                                var $span = $('<span class="totalTime">')
                                        .appendTo($('#header'));
                                $span.append("Status: (Worked/Total) -")
                                        .append("\t\t\t\t\t").append(
                                                msg.DAOCount).append("/")
                                        .append(msg.excelCount);
                                var $span1 = $('<span class="effeciency">')
                                        .appendTo($('#header'));
                                $span1.append("Effeciency : ").append(
                                        msg.effeciency);
                            }
                        });
                        e.preventDefault();
                    }).submit();
        });

GetCaseData.jsp

<%@page import="org.bean.UserBean"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="myCssFile.css">

<script type="text/javascript">
    function enableSubmit() {
        document.getElementById("getCase").disabled = true;
        document.getElementById("submitButton").disabled = false;
    }
    function enableGetCase() {
        document.getElementById("getCase").disabled = false;
        document.getElementById("submitButton").disabled = true;
    }

    function dynamicdropdown(listindex) {
        document.getElementById("subcategory").length = 0;
        switch (listindex) {
        case "closed":
            document.getElementById("subcategory").options[0] = new Option(
                    "Please select framework", "");
            document.getElementById("subcategory").options[1] = new Option(
                    "Closed", "Closed");
            document.getElementById("subcategory").options[2] = new Option(
                    "Cash Apps/Financial Processing",
                    "Cash Apps/Financial Processing");

            break;
        case "open":
            document.getElementById("subcategory").options[0] = new Option(
                    "Please select framework", "");
            document.getElementById("subcategory").options[1] = new Option(
                    "Waiting For BLUP", "Waiting For BLUP");
            document.getElementById("subcategory").options[2] = new Option(
                    "Waiting for Clarification from Rep",
                    "Waiting for Clarification from Rep");
            document.getElementById("subcategory").options[3] = new Option(
                    "Waiting for Supervisor Assistance",
                    "Waiting for Supervisor Assistance");
            document.getElementById("subcategory").options[4] = new Option(
                    "Need to route the case to Cash Apps/FP",
                    "Need to route the case to Cash Apps/FP");
            document.getElementById("subcategory").options[5] = new Option(
                    "Waiting for Approval", "Waiting for Approval");
            document.getElementById("subcategory").options[6] = new Option(
                    "Send Updated Invoice", "Send Updated Invoice");
            break;
        case "reassigned":
            document.getElementById("subcategory").options[0] = new Option(
                    "Please select framework", "");
            document.getElementById("subcategory").options[1] = new Option(
                    "Assigned to other agent", "Assigned to other agent");
            document.getElementById("subcategory").options[2] = new Option(
                    "Assigned to other queue", "Assigned to other queue");

            break;

        }
        return true;
    }
    var date = Date.parse(new Date());
    function getLastDate() {
        var date = new Date();
        document.getElementById("endTime").value = [ date.getMonth() + 1,
                date.getDate(), date.getFullYear() ].join('/')
                + ' '
                + [ date.getHours(), date.getMinutes(), date.getSeconds() ]
                        .join(':');

        setTimeout(function() {
            document.getElementById("myForm").submit();
        }, 3000);

    }
</script>
</head>
<body>
    <div class="header" id="header">
        <form id="form1"></form>
    </div>

    <div class="bodytag">
        <form method="post" id="myForm" action="PostData">
            <%
                Date date = new Date();
                SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy HH:mm:ss");
                String startFormattedDate1 = sdf.format(date);
                Date d1 = sdf.parse(startFormattedDate1);
                date = new Date();
                String startFormattedDate2 = sdf.format(date);
            %>
            <input type="Submit" value="Get Case" name="getCase" id="getCase"
                disabled="disabled" />
            <table>

                <tr>
                    <td>Case Number</td>
                    <td><input id="caseNumber" name="caseNumber" type="text"
                        value="${userBeans[0].getCaseNumber()}" /></td>

                    <td>Case Owner</td>
                    <td><input id="caseOwner" name="caseOwner" type="text"
                        value="${userBeans[0].getCaseOwner()}" /></td>
                </tr>
                <tr>
                    <td>Source</td>
                    <td><input id="source" name="source" type="text" /></td>
                    <td>Status</td>
                    <td><input id="status" name="status" type="text"
                        value="${userBeans[0].getStatus()}" /></td>
                </tr>
                <tr>
                    <td class="auto-style2">Issue</td>
                    <td class="auto-style2"><input id="issue" name="issue"
                        value="${userBeans[0].getIssue()}" type="text" /></td>
                    <td class="auto-style2">Reason</td>
                    <td class="auto-style2"><input id="reason" name="reason"
                        value="${userBeans[0].getReason()}" type="text" /></td>
                </tr>
                <tr>
                    <td>Date/Time Opened</td>
                    <td><input id="dateOpened" type="text" name="dateOpened"
                        value="${userBeans[0].getDateOpened()}" /></td>
                    <td>Age(Days)</td>
                    <td><input id="age" type="text" name="age"
                        value="${userBeans[0].getAge()}" /></td>
                </tr>
                <tr>
                    <td>Resolution</td>
                    <td><select id="Select1" name="resolution"
                        onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                            <option value="" disabled selected>Select</option>
                            <option value="closed" id="closed">Closed</option>
                            <option value="open" id="open">Open</option>
                            <option value="reassigned" id="reassigned">Reassigned</option>
                    </select></td>
                    <td>Final Status</td>
                    <td><select name="finalStatus" id="subcategory">
                            <option value="" disabled selected>Please select
                                framework</option>
                    </select></td>
                </tr>
                <tr>
                    <td>Start Time</td>
                    <td><input id="startTime" type="text" name="startDate"
                        value="<%=startFormattedDate1%>" /></td>
                    <td>End Time</td>
                    <td><input id="endTime" name="endDate" type="text" /></td>
                </tr>
            </table>
            <input type="button" value="Submit Form" onclick="getLastDate()"
                id="postData" name="postData" />
        </form>
    </div>
    <script type="text/javascript" src="SampleJS.js"></script>

</body>
</html>

问题是这个程序在Chrome中运行不正常，但在FireFox和Eclipse默认浏览器中运行正常。

在Chrome中，只会切换按钮。启用和禁用这两个按钮。没有数据被提取到文本框中，或者没有提交给DB完成。

点击Get Case按钮后，Chrome和FF的屏幕截图如下。 Chrome O / P：

FireFox O / P：

Webapp不仅适用于Chrome，而且适用于FireFox和Eclipse默认浏览器

0 个答案: