之前,想过后端的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,控制台: