通过AJAX与Java后端交互,显示数据库的数据
前言
今天学习了AJAX将Mysql数据库的数据显示到前端页面,以前会通过后端将数据集合传递给前端(jsp),并通过<c:foreach></c:foreach>遍历显示所有数据。学习到一种其他方法,跟大家分享一下。
后续将更新在框架中的使用(注解@responsebody)。
补充说明:一般在异步获取数据时使用,在使用@RequestMapping后,返回值通常解析为跳转路径,加上@responsebody后返回结果不会被解析为跳转路径,而是直接写入HTTP responsebody中。比如异步获取json数据,加上@responsebody后,会直接返回json数据。
前端部分(HTML)
前端的页面包括AJAX的编写
-
引入JQUERY
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
-
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渲染数据
-
编写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 += "<tr>" +"<td>"+ls.fd_id+"</td>" +"<td>"+ls.fd_login_name+"</td>" +"<td>"+ls.fd_password+"</td>"+ "</tr>"; } $("#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:910380566@.com)