素材巴巴 > 程序开发 >

利用ajax和servlet实现前后端数据交互(json)

程序开发 2023-09-03 16:00:55

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

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

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

前端 test.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 stubdoPost(request, response);}protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubString 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 arraylistTest = new ArrayList();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

在浏览器打开前端网址,F12,控制台:


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。