Ajax+Tomcat实现前后端交互-笔记

因为不想学swing，所以准备用前端 + 后端来写Java大作业

交互实现过程：

前端触发->请求被后端抓取->后根据get或post请求进行处理->返回数据或者进行页面跳转

什么都会的队长给我配置了Tomcat，然后替我写了基本的后端处理ajax请求的代码，我照着葫芦画瓢，画的歪歪扭扭。

因为我没有搞懂全部的流程（因为Tomcat根本就没学），所以这里只是一个笔记，不会写完整的过程。

前端请求：

// 预加载数据
  window.onload = function() {
    
    
    var getData = function () {
    
    
      $.ajax({
    
    
      	// 请求地址
        url: '/getData',
        // 请求方法
        method: 'get',
        // 传参的格式
        contentType: "application/json;charset=utf-8",
        dataType:"json",
        // 处理返回数据的方法
        success: function (data) {
    
    
        // 函数的内容不要看了 这是具体的作业代码，单独拿出来没有意义
          // 进行一次筛选
          items = data.filter(e => e.number > 0);
          
          // 数据一旦获取就直接加载到页面
          // 先获取数据 再挂载 vue
          var app = new Vue({
    
    
            el: '#app',
            data: {
    
    
              items: items,
              searchResult: searchResult,
              id: '',
            },
            methods: {
    
    
              // 搜索
              search: function(id) {
    
    
                this.searchResult = items.filter(e => e.id.toString() === id)
              },
              // 租赁
              rent: function(id, number) {
    
    
                rentCar(id, number)
              }
            }
          });
        }
      })
    };
    // 在window.onload里面 直接执行 获取数据库数据（实际上是由后台代码先进行获取的）
    getData();
  }

后端处理：
完整的代码很复杂，这里只记录几个比较重要的点

// 这里表示我处理的是地址为 /getData 的请求
// 和上方的 ajax 的 url 属性相对应
@WebServlet("/getData")

	// JDBC 驱动
	static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
	// 数据库 url
    static final String DB_URL = "jdbc:mysql://localhost:3306/CARRENT?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC";

    // 数据库的用户名与密码，需要根据自己的设置
    static final String USER = "root";
    static final String PASS = "root";
    
	// 连接数据库用的玩意儿
	Connection conn = null;
	Statement stmt = null;

	// 注册 JDBC 驱动
    Class.forName(JDBC_DRIVER);

    // 打开链接
    System.out.println("连接数据库...");
    conn = DriverManager.getConnection(DB_URL,USER,PASS);

    // 执行查询
    System.out.println(" 实例化Statement对象...");
    stmt = conn.createStatement();
    String sql;
    sql = "SELECT * FROM CARS";
    // 接受数据库返回值
    ResultSet rs = stmt.executeQuery(sql);

	//创建一个 json数组 用于返回数据
	JSONArray json = new JSONArray();
	// 展开结果集数据库
 	while(rs.next()){
    
    
    	JSONObject j = new JSONObject();
    	// json 对象添加键值对
    	j.put("id", rs.getInt("id"));
    	j.put("name", rs.getString("name"));
    	j.put("type", rs.getString("type"));
    	j.put("dayPrice", rs.getInt("dayPrice"));
    	j.put("number", rs.getInt("number"));

    	json.add(j);
  	}
	
	 // 完成后关闭
     rs.close();
     stmt.close();
     conn.close();

	// 设置接收数据的编码
	req.setCharacterEncoding("utf-8");
	// 设置返回数据的编码
    resp.setCharacterEncoding("utf-8");
    resp.setContentType("application/json;charset=UTF-8");
    // 返回值 这里我不会
    ServletOutputStream os = resp.getOutputStream();
    // 对返回值进行编码的规范 并 返回
    os.write(String.valueOf(json).getBytes("utf-8"));

Ajax+Tomcat实现前后端交互-笔记

猜你喜欢