先来看一下最后的显示效果：
每隔5秒刷新一次表格
1.创建一个名为ajax2的web项目，具体步骤见：用Intellij idea新建一个java web+Servlet项目
2.创建如图所示文件：
3.写Stock这个Javabean对象，包括股票代码，名称，价格：
package bean;
public class Stock {
private String code;
private String name;
private int price;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
}
4.写后端代码，ActionServlet：
package web;
import bean.Stock;
import net.sf.json.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
public class ActionServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("service()");
req.setCharacterEncoding("utf-8");
//获得请求资源路径
// 端口号之后的都是。
String uri = req.getRequestURI();
System.out.println("uri:" + uri);
//分析请求资源路径
String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
System.out.println("action:" + action);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
//依据分析的结果，进行不同的处理
if ("/quoto".equals(action)) {
//模拟生成几支股票信息
List<Stock> stocks = new ArrayList<Stock>();
Random r = new Random();
for (int i = 0; i < 8; i++) {
Stock s = new Stock();
s.setCode("12345" + r.nextInt(10));
s.setName("中国李宁" + r.nextInt(10));
s.setPrice(r.nextInt(1000));
stocks.add(s);
}
//方法的参数可以是 数组或者集合
JSONArray jsonArray = JSONArray.fromObject(stocks);
String jsonStr = jsonArray.toString();
System.out.println(jsonStr);
out.println(jsonStr);
}
}
}
这里把javabean转换成json对象我使用的是json.lib，大家可以用gson或fastson，会比这方便很多。
这里json.lib要导入好几个包，我导入了7个，实际好像6个就够了，我也不知道哪一个不是。。就全部导入了：
导入步骤：File->Project Structure->
如果有一个jar没导对，有可能会出500的错，我调试了很久，如果你也出现我这样的错，请看这个->idea发布到tomcat缺少jar，如何将lib中的单个包部署到tomcat
5.写网页~stock.jsp
<%--
Created by IntelliJ IDEA.
User: 71403
Date: 2018/8/1
Time: 22:27
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>股票刷新</title>
<style>
#d1 {
width: 450px;
height: 350px;
background-color: greenyellow;
margin-left: 300px;
margin-top: 20px;
}
#d2 {
height: 32px;
background-color: chartreuse;
color: darkgreen;
}
table {
color: darkgreen;
font-style: italic;
font-size: 24px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function () {
//页面加载完成执行
setInterval(quoto,5000);
});
//该函数调用ajax对象（XMLHttpRequest）向服务器发送异步请求，
// 服务返回一个描述股票信息的JSON字符串。
//通过解析json字符串，获得股票信息，然后更新表格。
function quoto() {
//利用jQuery提供得方法来向服务器发送异步请求
$.ajax({
"url":"quoto.do",
"type":"post",
"dataType":"json",
"success":function (stocks) {
//$.ajax方法会自动将json字符串转换成JavaScript对象
//先清空tbody
$('#tb1').empty();
for (i = 0; i < stocks.length; i++) {
var s = stocks[i];
//更新表格
$('#tb1').append(
'<tr><td>'+ s.code
+ '</td><td>' + s.name
+ '</td><td>' + s.price
+ '</td></tr>');
}
}
});
}
</script>
</head>
<body style="font-size: 25px">
<div id="d1">
<div id="d2">股票行情</div>
<div id="d3">
<table width="100%">
<thead>
<tr>
<td>代码</td>
<td>名称</td>
<td>价格</td>
</tr>
</thead>
<tbody id="tb1">
</tbody>
</table>
</div>
</div>
</body>
</html>
6.配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>7.部署Tomcat，在开头的创建教程里有哦~
扫描二维码关注公众号，回复：
2816011 查看本文章
