關於Servlet建立成功卻無法在JavaScript中引用的問題
阿新 • • 發佈：2019-01-29
上課剛學了Ajax，想利用Js和Servlet通訊，獲取資訊更新表格內容，程式碼如下：
jsp程式碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>獲取多人資訊的表格</title> <script type="text/javascript" src="Javascript/getPersonByJson.js"></script> <script type="text/javascript" src="Javascript/jquery-1.10.2.js"></script> </head> <body> <input type="button" value="點選獲取多人資訊" onclick="getPerson();"> <div id="showinfor"> <table id="p_table" border="3px" width="100%"> <tbody> <tr> <th>姓名</th> <th>性別</th> <th>電話</th> <th>地址</th> </tr> </tbody> </table> </div> </body> </html>
Js程式碼如下：
var xmlHttp; function getPerson(){ createXhr(); //open(method, url, asynch) //傳送資料用post xmlHttp.open("get","PersonServletJson",true); xmlHttp.onreadystatechange = function(){ //4表示已完成 if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ var e_table=document.getElementById("p_table"); //解析返回的Json格式資料 var jsonObject=eval("("+xmlHttp.responseText+")"); for(var i=0;i<jsonObject.length;i++){ var name=jsonObject[i].name; var sex=jsonObject[i].sex; var phone=jsonObject[i].phone; var address=jsonObject[i].address; //更新表格內容 var e_tr=e_table.insertRow(i+1); var t_td1=e_tr.insertCell(0); t_td1.innerHTML=name; var t_td2=e_tr.insertCell(1); t_td2.innerHTML=sex; var t_td3=e_tr.insertCell(2); t_td3.innerHTML=phone; var t_td4=e_tr.insertCell(3); t_td4.innerHTML=address; } } } }; xmlHttp.send(null); } //建立XMLHttpRequest function createXhr(){ if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ if(window.ActiveXObject){ var activeName = ["micrsoft.xmlhttp","msxml2.xmlhttp"]; for(var i=0;i<activeName.length;i++){ try{ xmlHttp = new ActiveXObject(activeName[i]); break; }catch(e){ alert("xmlhttp"+e); } } } } }
Servlet程式碼如下：
package com.inspur; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class PersonServlet */ @WebServlet("/PersonServlet") public class PersonServlet extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see Httpersonervlet#Httpersonervlet() */ public PersonServlet() { super(); // TODO Auto-generated constructor stub } /** * @see Httpersonervlet#doGet(HttpersonervletRequest request, HttpersonervletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub Person[] person = new Person[5]; person[0] = new Person("zhangsan1","male","333","changqing"); person[1] = new Person("zhangsan1","male","333","changqing"); person[2] = new Person("zhangsan1","male","333","changqing"); person[3] = new Person("zhangsan1","male","333","changqing"); person[4] = new Person("zhangsan1","male","333","changqing"); StringBuffer resultStr = new StringBuffer(); resultStr.append("["); //按照Json格式編輯返回的資訊，用\轉義字元 for(int i=0;i<person.length;i++){ if(i==person.length-1){ resultStr.append("{\"name\":\""+person[i].getName() +"\",\"sex\":\""+person[i].getSex()+"\",\"phone\":\"" +person[i].getPhone()+"\",\"address\":\"" +person[i].getAddress()+"\"}"); }else{ resultStr.append("{\"name\":\""+person[i].getName() +"\",\"sex\":\""+person[i].getSex()+"\",\"phone\":\"" +person[i].getPhone()+"\",\"address\":\"" +person[i].getAddress()+"\"},"); } } resultStr.append("]"); PrintWriter out = response.getWriter(); out.print(resultStr); out.flush(); out.close(); } /** * @see Httpersonervlet#doPost(HttpersonervletRequest request, HttpersonervletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } }
可是當點選按鈕後發現，xmlHttp.status為404。找不到Servlet，百度了好久也沒找到答案，最後發現是xmlHttp.open()方法裡的url引數錯誤，如果WebRoot->WEB-INF->web.xml中對應的Servlet為：
<servlet-mapping>
<servlet-name>PersonServlet</servlet-name>
<url-pattern>/servlet/PersonServlet</url-pattern>
</servlet-mapping> 則url應該為servlet/PersonServlet，更改url後就可以成功執行
