之前，想过后端的servlet读取前端发来的post请求，对于如何再反馈到前端的方法，是先利用servlet保存到数据库，然后前端再读取数据库的内容以达到反馈到前端的目的，这样操作显然很傻bi且效率低下，完全忘记了servlet结构中的response的作用。

现在利用此次暑期实习的时间，整理了一下。

1. 首先是前端通过ajax传递数据（json）到后台

前端 test.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前後端測試</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.post("/practice_system/Test1",{
			name:"程哥",
			url:"http://www.cheng1996.cn"
		},
		function(data,status){
			alert("数据: \n" + data + "\n状态: " + status);
			var jsonArray = JSON.parse(data);
			console.log(jsonArray);
			for(var i=0;i<jsonArray.length;i++)
			{
				console.log(jsonArray[0].name);
				console.log(jsonArray[0].url);
			}
		});
	});
});
</script>
</head>
<body>

<button>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>
</html>

后台 Test1.java:

package interfaceServlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

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.google.gson.Gson;

/**
 * Servlet implementation class Test1
 */
@WebServlet("/Test1")
public class Test1 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String name = request.getParameter("name");
		String url = request.getParameter("url");
		System.out.println(name);
		System.out.println(url);

		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");// 注意設置為utf-8否則前端接收到的中文為亂碼
		PrintWriter out = response.getWriter();

		Gson gson = new Gson();
		ArrayList<Test1Object> arraylistTest = new ArrayList<Test1Object>();

		Test1Object t1 = new Test1Object();
		Test1Object t2 = new Test1Object();

		t1.setName(name);
		t1.setUrl(url);
		t2.setName(name);
		t2.setUrl(url);

		arraylistTest.add(t1);
		arraylistTest.add(t2);

		String info = gson.toJson(arraylistTest);
		// 打印出檢查
		System.out.println(info);
		// 返回給前端
		out.write(info);
	}

}

其中的对于json数组的解析我是采用gson包进行，gson jar包下载

且为了便于对于json数组中的json对象进行处理，新建了一个bean类：Test1Object.java

Test1Object.java:

package interfaceServlet;

public class Test1Object {
	private String name;
	private String url;
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}

}

值得注意的是新建一个bean类的getter和setter通常都有快捷键：

如eclipse中的快捷键是source -> Generate Getters and Setters

2. 运行结果

后台打印出接收到的json（控制台前两行），且在反馈给前端之前打印出组装好的json数组（控制台最后一行，即第三行）。

最后，前端获取到的json数组如何解析呢？

var jsonArray = JSON.parse(data);
			console.log(jsonArray);
			for(var i=0;i<jsonArray.length;i++)
			{
				console.log(jsonArray[0].name);
				console.log(jsonArray[0].url);
			}

在浏览器打开前端网址，F12，控制台：

利用ajax和servlet实现前后端数据交互（json）

1. 首先是前端通过ajax传递数据（json）到后台

2. 运行结果

猜你喜欢