Maven| 前端JQuery调用【ajax请求数据】并打印成表格

最新推荐文章于 2024-02-29 16:06:23 发布

cungudafa

最新推荐文章于 2024-02-29 16:06:23 发布

阅读量1.2k

点赞数

分类专栏： # SSM Java前后端开发学习文章标签： ajax获取后台数据在前段展示并打印成表格 JQuery Maven SpringMVC

本文链接：https://blog.csdn.net/cungudafa/article/details/97926070

版权

Java前后端开发学习同时被 2 个专栏收录

58 篇文章 5 订阅

订阅专栏

SSM

23 篇文章 3 订阅

订阅专栏

序

效果演示
先给出结果，如果有用就继续浏览，没有帮助就可以关掉这篇文章啦！

数据库内容：（借用之前配置的maven项目，对数据库test表news进行查询）
效果动画演示：
访问过程：
配置的是Springboot，通过ajax请求返回json数据如下图：

正文

1、前端

（1）引入BootStrap和JQuery，用于表格样式和前端JavaScript语言编译。

BootStrap下载：https://v4.bootcss.com/
JQuery下载：https://jquery.com/download/

（2）点击button设置onclinck属性requestData()。
（3）提前设置一个table标签，设置id为tab；用于打印json结果。
（4）自定义myScript.js，添加button同名的onclinck函数名function requestData()，在函数中添加ajax方法。
在这里插入图片描述
index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<link rel="stylesheet" href="statics/css/bootstrap.min.css" >
<head>
    <title>Title</title>
</head>
<body>
    <button type="button" onclick="requestData()">试一试</button>
    <table id="tab" class='table table-condensed table-bordered table-striped'>

    </table>
    <!--提示：把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。-->
    <script src="statics/js/jquery-3.4.1.min.js"></script>
    <script src="statics/js/myScript.js"></script>

</body>
</html>

myScript.js

function requestData()
{
    $.ajax({
        url: "http://localhost:8080/helloworld_war_exploded/list",
        type: "post",
        dataType: "json",
        success: function(data){
            /*这个方法里是ajax发送请求成功之后执行的代码*/
            showData(data);//我们仅做数据展示
        },
        error: function(msg){
            alert("ajax连接异常："+msg);
        }
    });
}
function showData(data)
{
    var str = "";//定义用于拼接的字符串
    for (var i = 0; i < data.length; i++)
    {
        str = "<tr><td>" + data[i].id + "</td><td>" + data[i].title + "</td><td>" + data[i].time + "</td><td>"+ data[i].author + "</td></tr>"
        $("#tab").append(str);
    }
}

2、后端

（0）准备：pom.xml(阿里巴巴的fastjson.jar)
在这里插入图片描述

 <!-- fastJson -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.32</version>
    </dependency>
    <dependency>
      <groupId>org.codehaus.jackson</groupId>
      <artifactId>jackson-core-asl</artifactId>
      <version>1.9.12</version>
    </dependency>
    <dependency>
      <groupId>org.codehaus.jackson</groupId>
      <artifactId>jackson-mapper-asl</artifactId>
      <version>1.9.12</version>
    </dependency>

后端SpringMVC操作流程图：
在这里插入图片描述

（1）controller层：
通过Springboot的配置，ajax调用url: "http://localhost:8080/helloworld_war_exploded/list",即可执行doGet函数：

package cn.test.controller;

import cn.test.pojo.News;
import cn.test.service.NewsService;
import com.alibaba.fastjson.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;
import java.util.List;

@Controller
@RequestMapping("/")
public class NewsController {
    @Autowired
    private NewsService newsService;
    
    @RequestMapping("list")
    public void doGet(HttpServletResponse response, HttpServletRequest request) {
        try {//尝试获取json，必须有try异常捕获
            List<News> news1 = newsService.getNewsList();//数据获取
            String data = JSONArray.toJSONString(news1);//news对象转换为jsonstring类型
            System.out.println(data);
            response.setCharacterEncoding("utf-8");//解决json数据中文乱码
            response.setContentType("text/html;charset=utf-8");//解决Chrome控制台中文乱码
            PrintWriter respWritter = response.getWriter();
            respWritter.append(data);//返回到前端
            System.out.println("成功");
        }
        catch (Exception e)
        {
            e.printStackTrace();
            System.out.println("失败");
        }
    }
}

（2）本次声明的接口的是服务层NewsService接口的getNewsList()函数,

package cn.test.service;

import cn.test.pojo.News;

import java.util.List;

public interface NewsService {
    List<News> getNewsList();
}

（3）服务层实例化NewsmapperImpl类中函数getNewsList()调用的是数据操作层newsMapper.getNewsList();方法。

package cn.test.service.impl;

import cn.test.mapper.NewsMapper;
import cn.test.pojo.News;
import cn.test.service.NewsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class NewsServiceImpl implements NewsService {
    @Autowired
    private NewsMapper newsMapper;


    @Override
    public List<News> getNewsList() {
        return newsMapper.getNewsList();
    }
}

（4）数据操作层接口NewsMapper通过Mybatis配置，在同名NewsMapper.xml中，实现sql对数据库进行访问：
NewsMapper.java：

package cn.test.mapper;
import cn.test.pojo.News;
import java.util.List;

public interface NewsMapper {
    List<News> getNewsList();
}

NewsMapper.xml：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.test.mapper.NewsMapper" >
  <resultMap id="BaseResultMap" type="cn.test.pojo.News" >
    <id column="id" property="id" jdbcType="INTEGER" />
    <result column="title" property="title" jdbcType="VARCHAR" />
    <result column="time" property="time" jdbcType="BIGINT" />
    <result column="author" property="author" jdbcType="VARCHAR" />
    <result column="typeid" property="typeid" jdbcType="INTEGER" />
    <result column="content" property="content" jdbcType="VARCHAR" />
  </resultMap>
  
  <select id="getNewsList" resultMap="BaseResultMap" parameterType="cn.test.pojo.News" resultType="List" >
    select * from news
  </select>

</mapper>

数据库的配置在前一文讲过了，这里就飘过。快速链接：
IDEA整合Maven+逆向工程生成实体类和映射:
https://blog.csdn.net/cungudafa/article/details/97775787

总之，
ajax的访问比form表单复杂一点，但也不难，重点是对json格式的处理。
熟能生巧，这里记录一下，方便以后查看。

cungudafa

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
Maven| 前端JQuery调用【ajax请求数据】并打印成表格

目录序正文1、前端2、后端序效果演示先给出结果，如果有用就继续浏览，没有帮助就可以关掉这篇文章啦！数据库内容：（借用之前配置的maven项目，对数据库test表news进行查询）效果动画演示：访问过程：配置的是Springboot，通过ajax请求返回json数据如下图：正文1、前端（1）引入BootStrap和JQuery，用于表格样式和前端JavaScript语言...
复制链接

扫一扫

专栏目录