黑马程序员技术交流社区
标题:
【上海校区】ajax的简单应用
[打印本页]
作者:
梦缠绕的时候
时间:
2018-8-6 09:32
标题:
【上海校区】ajax的简单应用
效果图如下：
1.创建student类
package
com.neusoft.json.domain;
public
class Student {
private
String name;
private
double
salary;
public String getName() {
return
name;
}
public void setName(String name) {
this
.name = name;
}
public double getSalary() {
return
salary;
}
public void setSalary(double salary) {
this
.salary = salary;
}
public Student(String name, double salary) {
this
.name = name;
this
.salary = salary;
}
}
2.创建servlet
package
com.neusoft.json.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
com.neusoft.json.domain.Student;
import
flexjson.JSONSerializer;
@WebServlet
(
"/show"
)
public
class SSS extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Student> ss=
new
ArrayList<>();
ss.add(
new
Student(
"nihao"
,
250
));
ss.add(
new
Student(
"张三"
,
550
));
ss.add(
new
Student(
"lisi"
,
1250
));
JSONSerializer js=
new
JSONSerializer();
String str=js.exclude(
"class"
).serialize(ss);
response.getWriter().println(str);
}
}
3.创建jsp
<%@ 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"
>
var q;
function yq(){
if
(window.ActiveXObject){
return
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
}
else
if
(window.XMLHttpRequest){
return
new
XMLHttpRequest();
}
}
function s(){
q=yq();
q.onreadystatechange=function(){
if
(q.readyState==
4
){
//请求状态
if
(q.status==
200
){
//http状态
var t=q.responseText;
var json=eval(
"("
+t+
")"
);
var table=
"<table border='1' width='70%'><tr><th>姓名</th><th>工资</th></tr>"
;
for
(i=
0
;i<json.length;i++){
table+=
"<tr><td>"
+json
.name+
"</td><td>"
+json
.salary+
"</td></tr>"
;
}
table+=
"</table>"
;
var div=document.getElementById(
"div"
);
div.innerHTML=table;
}
}
}
q.open(
"GET"
,
"${pageContext.request.contextPath}/show"
);
q.send(
null
);
}
</script>
<title>Insert title here</title>
</head>
<body>
<input type=
"button"
value=
"显示"
onclick=
"s()"
/>
<div id=
"div"
></div>
</body>
</html>
作者:
不二晨
时间:
2018-8-16 17:23
奈斯
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
