利用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,控制台:
标签:
相关文章
-
无相关信息