java實現後臺的數據顯示在前端

本篇使用servlet +.ajax( )的技術，實現簡單的前後臺的交互問題。
首先來了解一下AJAX
AJAX是jquery的一個方法，一種在網頁上調用後臺接口的方式。
示例：$.ajax( { 參數 } ) ;
$.ajax()等同於jQuery.ajax( )
參數裏是一個JS對象, 其中的屬性：
type: ’ GET’ /‘POST’
url: 接口地址
success:服務器應答時，調用此function處理(回調方法)
另外說一下Servlet
Servlet，服務小程序，爲客戶端提供自定義服務的機制。
瀏覽器(客戶端) —請求—》Tomcat(服務器)
Tomcat(服務器) —應答—》瀏覽器(客戶端)

//創建一個學生pojo 類

/**
 * 這是一個關於學生的POJO類
 * 暫時不引入數據庫
 * 只是一個假的數據庫
 */

public class Student
{
    public int id;
    public String name;
    public String adress;
    
    public Student()
    {
    	
    }
    
    public Student(int id,String name,String adress)
    {
    	this.id = id;
    	this.name = name;
    	this.adress = adress;
    }

	public int getId()
	{
		return id;
	}

	public void setId(int id)
	{
		this.id = id;
	}

	public String getName()
	{
		return name;
	}

	public void setName(String name)
	{
		this.name = name;
	}

	public String getAdress()
	{
		return adress;
	}

	public void setAdress(String adress)
	{
		this.adress = adress;
	}

創建一個假的學生類型數據庫並存入數據

public class Db
{
   //創建一個本類的全局對象
	public static Db i = new Db();
	
	//使用鏈表寫入數據
	private ArrayList<Student> stu = new ArrayList<>();
	
	private Db()
	{
		stu.add(new Student(20180001,"老王","北京"));
		stu.add(new Student(20180002,"老甄","邢臺"));
		stu.add(new Student(20180003,"老高","邢臺"));
		stu.add(new Student(20180004,"老孟","邯鄲"));
		stu.add(new Student(20180005,"老裴","太原"));
		stu.add(new Student(20180006,"老李","東北"));
		stu.add(new Student(20180007,"老張","武漢"));
		stu.add(new Student(20180008,"老苗","重慶"));
		stu.add(new Student(20180009,"老郭","北京"));
		
	}
	
	//獲取全部信息
	public ArrayList<Student> all()
	{
		return stu;
	}
	
	//按照學號查詢
	public ArrayList<Student> byId(int from,int to)
	{
		ArrayList<Student> qStu = new ArrayList<>();
		for(int i=0;i<stu.size();i++)
		{
			Student s = stu.get(i);
			if(s.id<=from &&s.id<=to)
			{
				qStu.add(s);
			}
		}
		return qStu;
	}
}

創建一個servlet
將數據返回

/**
*只需要更改doGet方法
*/
@WebServlet("/QueryAll")
public class QueryAll extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		ArrayList<Student> rows = Db.i.all();
		
		//轉換成JSON格式
		JSONArray result = new JSONArray(rows);
		
		//返回數據
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/plain");
		Writer writer = response.getWriter();
		writer.write(result.toString(2));
		writer.close();
		}
	}

下面是前端的代碼將html+css+js結合到了一起

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			body{
				background-color: #EEEEEE;
				margin: 0px;
				padding: 0px;
			}
			table{
				border-collapse: collapse;
				table-layout: fixed;
			}
			table,td,th{
				border: 1px solid #888;
				text-align: center;
			}
			.main{
				width: 600px;
				height: 300px;
				background-color: #FFFFFF;
				padding: 10px;
				margin: 10px auto;
				position: relative;
			}
			.main .content{
			    width: 300px;	
			}
			.empty{
				text-align: center;
				padding: 4px;
				display: block;
				border: 0px solid #888;
				border-width: 0px 1px 1px 1px;
			}
			
			.main .id{ width: 100px;}
			.main .name{width: 100px;}
			.main .adress{width: 100px;}
		</style>
	</head>
	
	<body>
		<div class="main">
		<button onclick="query()">查詢</button>
		 <div class="content">
		<table>
			<thead>
				<tr>
					<th class="id">學號</th>
					<th class="name">姓名</th>
					<th class="adress">住址</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<div class="empty">
			現在沒有數據
		</div>
		</div>
		</div>
	</body>
	<script>
		//查詢
		function query()
		{
			$.ajax({
				type:"GET";
				url:"QueryAll";
				dataType:"json";
				success:function(resp)
				{
					show(resp);
				}	
			});
		}
		
		//格式化數據並顯示
		function show(result)
		{
			var cont = $(".main tbody");
			cont.html(""); //清空
			for(var row of result)
			{
				var str = "<tr>"
				    +"<td>"+row.id+"</td>"
					+"<td>"+row.name+"</td>"
					+"<td>"+row.adress+"</td>"
					+"</tr>";
				cont.append(str);	
			}	
			//沒有數據把空的內容顯示出來
			if(result.length>0)
			     $(".empty").hide();
		    else
			     $(".empty").show();
		}
		
	</script>
</html>