请老师看看程序哪里有问题

请老师看看程序哪里有问题

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<script type="text/javascript" src="resource/js/jquery-3.3.1.js"></script>
<title>留言板</title>
<%
	String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
	String username=(String)session.getAttribute("username");
%>
</head>
<body>
	<center>
			<h1>留言板</h1>
			<label><span>留言人:</span><input id="username" type="text" readonly="readonly" value="<%=username %>" name="username"></label>
			<label><span>标题:</span><input id="title" type="text" name="title"></label>
			<label><span>内容:</span><textarea id="content" name="content"></textarea></label>
			<label><input type="button" value="提交" onclick="showMessages()"></label>
	</center>
	<table>
		<tr>
			<th>留言人</th>
			<th>标题</th>
			<th>内容</th>
		</tr>
		<tbody id="messages">
			
		</tbody>
	</table>
	<script>
		function showMessages(){
			alert("success");
			XMLHttpRequest xml=new XMLHttpRequest();
			xml.open("POST",'<%=basePath %>/MessageServlet','true');
			xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			var params="username="+$("input[name=username]")+"&title="+$("input[name=title]")+"&content="+$("input[name=content]");
			alert(params);
			xml.send(params);
			xml.onreadystatechange=function(){
				if(xml.readystate=="4"&&xml.status=="200"){
					var html=xml.responseText;
					alert(html);
					document.getElementById("messages").innerHtml=html;
				}
			}
		}
	</script>
</body>
</html>
package com.imooc.servlet;

import java.io.IOException;
import java.util.ArrayList;
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;

import org.json.JSONObject;

import com.imooc.db.Message;
import com.sun.glass.ui.Application;

@WebServlet("/MessageServlet")
public class MessageServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username=request.getParameter("username");
		String title=request.getParameter("title");
		String content=request.getParameter("content");
		System.out.println("username:"+username+"\ntitle:"+title+"\ncontent:"+content);
		//获取前端保存的留言内容列,并将新的留言添加进去
		List<Message> messagesList=(List<Message>)request.getServletContext().getAttribute("messagesList");
		if(messagesList==null){
			messagesList=new ArrayList<Message>();		
		}
		Message message=new Message(username,title,content);
		messagesList.add(message);
		request.getServletContext().setAttribute("messagesList", messagesList);
		//在后台拼接html内容,并返回给前端显示
		String html="";
		JSONObject json=null;
		for(Message temp:messagesList){
			html+="<tr><td>"+temp.getUsername()+"</td><td>"+temp.getTitle()+"</td><td>"+temp.getContent()+"</td></tr>";
		}
		json=new JSONObject(html);
		response.getOutputStream().write(json.toString().getBytes("utf-8"));
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

现在点击提交按钮没有能调用js方法,请问是哪里出了问题

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕阿满 2018-11-20 18:26:33

同学在使用ajax时有些问题,如下:

1、定义变量时应该使用var定义变量。

2、设置请求头时应该使用xml设置。

3、get请求时,send()方法没有参数。

4、onreadstatechange函数中,状态码不需要用引号。

5、最后显示服务器响应文本时的代码为document.getElementById("messages").innerHTML = xml.responseText;

代码修改如图:

http://img1.sycdn.imooc.com//climg/5bf3e1090001274207320466.jpg

修改后的代码为:

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<script type="text/javascript" src="resources/js/jquery-1.4.2.js"></script>
<title>留言板</title>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
    String username=(String)session.getAttribute("username");
%>
</head>
<body>
    <center>
            <h1>留言板</h1>
            <label><span>留言人:</span><input id="username" type="text" readonly="readonly" value="<%=username %>" name="username"></label>
            <label><span>标题:</span><input id="title" type="text" name="title"></label>
            <label><span>内容:</span><textarea id="content" name="content"></textarea></label>
            <label><input type="button" value="提交" onclick="showMessages()"></label>
    </center>
    <table>
        <tr>
            <th>留言人</th>
            <th>标题</th>
            <th>内容</th>
        </tr>
        <tbody id="messages">
             
        </tbody>
    </table>
    <script type="text/javascript">
    	
        function showMessages(){
            alert("success");
            var xml = new XMLHttpRequest();
            // XMLHttpRequest xml=new XMLHttpRequest();
            xml.open("POST",'<%=basePath %>/MessageServlet','true');
           // xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var params="username="+$("input[name=username]")+"&title="+$("input[name=title]")+"&content="+$("input[name=content]");
            alert(params);
            xml.send();
            xml.onreadystatechange=function(){
                	//if(xml.readystate=="4"&&xml.status=="200"){
                	if(xml.readyState==4&&xml.status==200){
                    var html=xml.responseText;
                    alert(html);
                   // document.getElementById("messages").innerHtml=html;
                    document.getElementById("messages").innerHTML = xml.responseText;
                }
            }
        }
    </script>
</body>
</html>
 import java.io.IOException;
import java.util.ArrayList;
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;
 
import org.json.JSONObject;

import com.imooc.jdbc.bean.Message;
import com.sun.glass.ui.Application;
 
@WebServlet("/MessageServlet")
public class MessageServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username=request.getParameter("username");
        String title=request.getParameter("title");
        String content=request.getParameter("content");
        System.out.println("username:"+username+"\ntitle:"+title+"\ncontent:"+content);
        //获取前端保存的留言内容列,并将新的留言添加进去
        List<Message> messagesList=(List<Message>)request.getServletContext().getAttribute("messagesList");
        if(messagesList==null){
            messagesList=new ArrayList<Message>();       
        }
        Message message=new Message("1","2","3");
        messagesList.add(message);
        request.getServletContext().setAttribute("messagesList", messagesList);
        //在后台拼接html内容,并返回给前端显示
        String html="";
        JSONObject json=null;
        for(Message temp:messagesList){
            html+="<tr><td>"+temp.getUsername()+"</td><td>"+temp.getTitle()+"</td><td>"+temp.getContent()+"</td></tr>";
        }
        /*json=new JSONObject(html);
        response.getOutputStream().write(json.toString().getBytes("utf-8"));*/
        response.getOutputStream().write(html.getBytes("UTF-8"));
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
 
}

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快!

好帮手慕阿满 2018-11-20 16:03:03

同学你好,在jsp中应该有<form action="messageSub.jsp" ></form>将留言板代码部分包裹进来,当点击提交按钮时,会提交到messageSub.jsp页面。可参考如下代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*,model.*" %>
<%
  String user = (String)session.getAttribute("loginUser");

  String subFlag = request.getParameter("subFlag");
  
  List<Message> messages = (List<Message>)session.getAttribute("messages");
%>
<!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=UTF-8">
<title>留言板</title>
<link href="form.css" rel="stylesheet" type="text/css" />
<link href="table.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	var subFlag = '<%=subFlag%>';
	if('1'==subFlag){
		alert('留言成功!');
	}
</script>
</head>
<body>
<form action="messageSub.jsp" method="post" class="smart-green">
	<h1>留言板</h1>
	
	<label>
	<span>留言人 :</span>
	<input id="user" type="text" name="user" value="<%=user %>" readonly/>
	</label>

	<label>
	<span>标题 :</span>
	<input id="title" type="text" name="title" value=""/>
	</label>

	<label>
	<span>内容 :</span>
	<textarea id="content" name="content"></textarea>
	</label>

	<span>&nbsp;</span>
	
	<label>
	<input type="submit" class="button" value="提交"/>
	</label>
  </form>
  <br/>
    <table id="table-3" width="85%" align="center">
    <tr>
      <th width="15%">留言人</th>
      <th width="15%">标题</th>
      <th width="70%">内容</th>
    </tr>
    <%
    	if(messages!=null){
    		for(Message message : messages){
    			%>
    			<tr>
    			   <td><%=user %></td>
    			   <td><%=message.getTitle() %></td>
    			   <td><%=message.getContent() %></td>
    			</tr>
    			<%
    		}
    	}
    %>
  </table>
</body>
</html>

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快!

  • 提问者 风中随影 #1
    这边我是通过ajax和servlet来实现的,是通过button按钮点击触发js方法,然后调用servlet,然后返回拼接好的html语言,老师能指点一下这个程序在哪里出了问题吗?
    2018-11-20 16:23:17
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10204    个

如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师