通过AJAX与Java后端交互，显示数据库的数据

前言

今天学习了AJAX将Mysql数据库的数据显示到前端页面，以前会通过后端将数据集合传递给前端(jsp)，并通过遍历显示所有数据。学习到一种其他方法，跟大家分享一下。
后续将更新在框架中的使用（注解@responsebody）。

		补充说明：一般在异步获取数据时使用，在使用@RequestMapping后，返回值通常解析为跳转路径，加上@responsebody后返回结果不会被解析为跳转路径，而是直接写入HTTP responsebody中。比如异步获取json数据，加上@responsebody后，会直接返回json数据。

前端部分（HTML）

前端的页面包括AJAX的编写

1. 引入JQUERY

   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   

2. AJAX通过 ID 渲染数据的，暂时就用表格的方式显示吧。也可以使用div 的方式显示（需要构建格式）

   <table width="50%" align="center" border="1">
   <tr align="center">
      <td>编号td>
      <td>用户名td>
      <td>密码td>
   tr>
   <tbody id="test">
   tbody>
   table>
   

   注意显示区域的ID： AJAX通过ID渲染数据
   

3. 编写AJAX：更多ajax属性介绍请看其他好的文章，此处推荐 AJAX属性详解.（此推荐为文章引用）

   <script>
   $(document).ready(function() {
       $.ajax({
           url : "show",//后台请求的数据，用的是PHP
           dataType : "json",//数据格式
           type : "post",//请求方式
           async : false,//false:同步   true:异步
           success : function(data) {   //如果请求成功，返回数据。	        
           console.log("前端请求后端成功，返回了数据");
               var html = "";
               for(var i=0;i<data.length;i++){    //遍历data数组
                   var ls = data[i];
             html += 
           	  ""
                  +""+ls.fd_id+""
                  +""+ls.fd_login_name+""
                  +""+ls.fd_password+""+	
                  "";
               }
               $("#test").html(html); //在html页面id=test的标签里显示html内容
           },
       })
   });
   </script>
   

   图中注意：
   1.url：后台请求的数据，这里是servlet
   2.data 是后端传递过来的JSON数据
   3.显示：拼接html代码并显示每一个字段的值。注意for循环中的变量，以及传递的JSON数据的name-separator 。我这里是fd_id/fd_login_name/fd_password 资料： 注：百科JSON 语法规则.
   4.#test 为html中的ID，AJAX通过ID渲染数据
   
   到这里前端部分完成

Java后端部分（Servlet）

思路：
1.连接数据库，查出显示的数据put到JSONObject构建格式比如：obj.put(“fd_id”,rs.getString(“fd_id”));
2.构建JSON数组对象，将JSONObject对象添加到数组；
3.新建一个String变量将JSON数组toString()通过 resp.getWriter().write(data);传递给AJAX接收；

代码如下：

package com.ajax.demo;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
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 org.junit.jupiter.api.Test;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

@WebServlet("/show")
public class Dataservlet extends HttpServlet
{
	private static final long serialVersionUID = 1L;
@Test	
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
	{
          try {
			  Class.forName("com.mysql.jdbc.Driver");
	          Connection conn= DriverManager.getConnection("jdbc:mysql://IP:3306/库名?userUnicode=true&characterencoding=utf8","用户","密码");
	          Statement stmt=conn.createStatement();
	          String sql = "select fd_id,fd_login_name,fd_password from sys_org_person";
	          ResultSet rs = stmt.executeQuery(sql);
	          JSONArray array = new JSONArray();
	          while(rs.next()) {
	        	  JSONObject obj = new JSONObject();
	        	  obj.put("fd_id",rs.getString("fd_id"));
	        	  obj.put("fd_login_name",rs.getString("fd_login_name"));
	        	  obj.put("fd_password",rs.getString("fd_password"));
	        	  array.add(obj);
	          }
	        String data = array.toString();
	        System.out.println(array);
	        resp.setCharacterEncoding("utf-8");
	        resp.setContentType("application/json; charset=utf-8");//返回的格式必须设置为application/json
	        resp.getWriter().write(data);

	          rs.close();
	          conn.close();
	          stmt.close();
          } catch (ClassNotFoundException e1) {
  			// TODO Auto-generated catch block
  			e1.printStackTrace();
  		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

最后看显示的效果

页面比较简单做测试使用，可以看到URL接收到的JSON数据，以及成功接收后端信息（console.log()）

总结

到这里就结束了，如果想后端接收AJAX传递的数据请查看相关文档：
java前后端使用ajax数据交互（简单demo）.（此处引用他人文章，大家一起学习，介意请联系删除！Email：[email protected]）