JSP文件中的JavaScript函数

Question

我将我的javascript函数附加到了我的JSP文件中，但是，它不起作用。 我在chatPage.jsp中收到“ sendMessage（）未定义”错误。 请检查我的代码，并告诉我我在哪里做错了。

在我的loginpage.jsp中，我将获取用户名和roomName，它将通过UserNameServlet，然后将getRequestDispatcher传递到chatpage.jsp，以转发用户名和roomName的值。

这是我的loginpage.jsp：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <form action="UserNameServlet" name="submitForm" onchange="handleNewRoom()" method="GET">
            <mark>Please select a room:</mark>
            <select id="roomSelect" name="roomSelect">
                <option value="room1">Room 1</option>
                <option value="room2">Room 2</option>
            </select>
            <br>
            <br>

            <mark>Please Enter username</mark>
            <input type="text" name="username" size="20"/>
            <input type="submit" value="Enter" />
        </form>

    </body>
</html>

这是我的UsernameServlet

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

    /**
     *
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");

        HttpSession session = request.getSession(true);
        String username = request.getParameter("username");
        session.setAttribute("username", username);

        String roomName = request.getParameter("roomSelect");
        if("newRoomOption".equals(roomName)) roomName=request.getParameter("newRoomName");
        request.setAttribute("roomName", roomName);
        request.setAttribute("username", username);
        request.getRequestDispatcher("chatPage.jsp").forward(request,response);

        }

这是我的chatPage.jsp

<html>
    <head>
        <title>TODO supply a title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    </head>
    <body>
        <textarea id="messagesTextArea" readonly="readonly" rows="10" cols="45"></textarea> <br>
        <input type="text" id="messagesText" size="50" /> <br>
        <input type="button" value="Send" onclick="sendMessage()"/>

    </body>

        <script type="text/javascript">
            var websocket = new WebSocket("ws://"+document.location.host+"+"document.location.pathname+"+""chatroomServerEndpoint/"${roomName});
            websocket.onmessage = function processMessage(message){
                var jsonData = JSON.parse(message.data);
                if(jsonData.message !== null) messagesTextArea.value += jsonData.message + "\n";
            }; 

            function sendMessage(){
                alert("hello");
            }
        </script>   
</html>

我还有另一个chatRoomServerEndpoint类。

@ServerEndpoint(value="/chatroomServerEndpoint/{chatroom}", configurator=ChatroomServerConfigurator.class)

Answer 1

当然，您需要关闭input标签。 看起来您的其余代码还可以。 如果你有

sendMessage()未定义消息

— sendMessage()主体中或您未在此处提供的JavaScript代码其他部分中存在错误。 例如，错误可能出在<script>标记所包含的js文件中。

更新资料

您的脚本位于body元素下方。 不正确 可能是sendMessage()上方的行中有错误，例如： "document.location.pathname+"+""chatroomServerEndpoint/"${roomName})

尝试注释所有这些行。

Answer 2

onsubmit应该与form element一起使用，而不是与input element 。（并且您应该按照其他答案中的说明关闭input标签。）

  <html> <head> <title>TODO supply a title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function sendMessage(){ //To do code.. alert('hello'); return false; // return false or true based on your condition/requirements } </script> </head> <body> <form onsubmit="return sendMessage();"> <textarea id="messagesTextArea" readonly="readonly" rows="10" cols="45"></textarea> <br> <input type="text" id="messagesText" size="50" /> <br> <input type="submit" value="Send" /> </form> </body> </html>