上课刚学了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="点击获取多人信息" οnclick="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后就可以成功运行