请老师看看程序哪里有问题
<%@ 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方法,请问是哪里出了问题
0
收起
正在回答 回答被采纳积分+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;
代码修改如图:
修改后的代码为:
<%@ 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> </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>
如果我的回答解决了你的疑惑,请采纳。祝:学习愉快!
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10204 个
如果你有Java语言基础,又想以后从事Java Web开发,那么本路径是你的不二选择!本路径从网页搭建开始入手,通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星