序

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

数据库内容：（借用之前配置的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 {@Autowiredprivate 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 {@Autowiredprivate NewsMapper newsMapper;@Overridepublic 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格式的处理。
熟能生巧，这里记录一下，方便以后查看。

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

ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
调用$.ajax不成功,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
ajax 请求成功再执行javascript,jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法...
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
关于前端接口 jquery的ajax请求
关于jquery中ajax请求一.ajax语法二. 四种请求方式 1.get请求 2.post请求 2.1 默认格式 2.2 json格式请求 2.3 序列化表单值 2.3 FormData 3. ...
原生AJAX以及JQuery发送AJAX请求的几种方式
JSON&AJAX 文章目录 JSON&AJAX 1. JSON 1.1 json概述 1.2 Json使用 3. 原生AJAX 4. JQuery的AJAX 4.1 GET请求方式 ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
jQuery 发送 AJAX 请求
AJAX 请求状态 xhr.readyState 可以用来查看请求当前的状态参考官方文档的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/XM ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...

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

目录

序

正文

1、前端

2、后端

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

最新文章

热门文章