SpringBoot笔记十一：html通过Ajax获取后端数据

我们知道在Java Web中，前端的JSP可以使用EL表达式来获取Servlet传过来的数据Spring Boot中也有Thymeleaf模板可以使用th: text="${XXX}"来获取Controller传过来的值

但是我就是不想要使用thymeleaf，我想使用普通的html，这里呢，使用Ajax向后端获取数据，先来展示一下最终结果图吧

先来展示一下后端代码吧，后端的Controller向数据库获取数据，然后以JSON格式传给前台，但是我懒，哈哈哈，所以我造两个假数据，以后再写一个Mybatis+Mysql的例子。先新建一个Java Bean

package com.wechat.main.bean;

/**

 * 消息表对应的Java Bean

 */

public class Message {

    private String id;

    private String command;

    private String description;

    private String content;

    public String getId() {

        return id;

    }

    public void setId(String id) {

        this.id = id;

    }

    public String getCommand() {

        return command;

    }

    public void setCommand(String command) {

        this.command = command;

    }

    public String getDescription() {

        return description;

    }

    public void setDescription(String description) {

        this.description = description;

    }

    public String getContent() {

        return content;

    }

    public void setContent(String content) {

        this.content = content;

    }

}

然后新建我们的Controller

package com.wechat.main.controller;

import com.wechat.main.bean.Message;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;

import java.util.List;

/**

 * 列表页面初始化

 */

@Controller

public class ListController {

    @ResponseBody

    @RequestMapping("/list")

    public List<Message> list(){

        List<Message> list=new ArrayList<>();

        Message message=new Message();

        message.setId("1");

        message.setCommand("许嵩");

        message.setDescription("歌手");

        message.setContent("最佳歌手");

        Message message1=new Message();

        message1.setId("2");

        message1.setCommand("蜀云泉");

        message1.setDescription("程序员");

        message1.setContent("不断成长的程序员");

        list.add(message);

        list.add(message1);

        return list;

    }

}

@ResponseBody这个注解就是把数据以JSON格式传走

看看我们的前端吧，我这里用了人家的，还有css，还有图片，所以比较好看。你们就自己写一个table凑合用吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<meta http-equiv="X-UA-Compatible"content="IE=9; IE=8; IE=7; IE=EDGE" />

		<title>内容列表页面</title>

		<link href="css/all.css" rel="stylesheet" type="text/css" />

		<script src="js/jquery-1.8.0.min.js"></script>

	</head>

	<body style="background: #e1e9eb;">

		<form action="" id="mainForm" method="post">

			<div class="right">

				<div class="current">当前位置：<a href="javascript:void(0)" style="color:#6E6E6E;">内容管理</a> &gt; 内容列表</div>

				<div class="rightCont">

					<p class="g_title fix">内容列表 <a class="btn03" href="#">新 增</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class="btn03" href="#">删 除</a></p>

					<table class="tab1">

						<tbody>

							<tr>

								<td width="90" align="right">演示字段1：</td>

								<td>

									<input type="text" class="allInput" value=""/>

								</td>

								<td width="90" align="right">演示字段2：</td>

								<td>

									<input type="text" class="allInput" value=""/>

								</td>

	                            <td width="85" align="right"><input type="submit" class="tabSub" value="查 询" /></td>

	                            <td width="85" align="right"><input type="button" class="tabSub"  onclick="refurbishIndex()" value="刷新" /></td>

	       					</tr>

						</tbody>

					</table>

					<div class="zixun fix">

						<table class="tab2" width="100%">

							<tr>

								<th><input type="checkbox" id="all" onclick="#"/></th>

								<th>id</th>

								<th>指令</th>

								<th>描述</th>

								<th>操作</th>

							</tr>

							<tbody id="tbodydata">

							</tbody>

						</table>

						<div class='page fix'>

							共 <b>4</b> 条

							<a href='###' class='first'>首页</a>

							<a href='###' class='pre'>上一页</a>

							当前第<span>1/1</span>页

							<a href='###' class='next'>下一页</a>

							<a href='###' class='last'>末页</a>

							跳至&nbsp;<input type='text' value='1' class='allInput w28' />&nbsp;页&nbsp;

							<a href='###' class='go'>GO</a>

						</div>

					</div>

				</div>

			</div>

	    </form>

	</body>

</html>

<script type="text/javascript">

	$(function () {

		refurbishIndex();

    })

    function refurbishIndex(){

        $.ajax({

            type:"post",

            url:"/list",

            data:{},

            async: false,

            success:function (data) {

                var str="";

                for (i in data) {

                    str += "<tr>" +

                        "<td>"+"<input type=\"checkbox\" />"+"</td>"+

						"<td align='center'>" + data[i].id + "</td>" +

                        "<td align='center'>" + data[i].command + "</td>" +

                        "<td align='center'>" + data[i].description + "</td>" +

							"<td>\n" +

                        "<a href=\"#\">修改</a>\n" +

                        "<a href=\"#\">删除</a>\n" +

                        "</td>"

                        "</tr>";

                }

                document.getElementById("tbodydata").innerHTML=str;

            }

        });

    }

</script>

大功告成

仅仅是这样还不够，我们怎么能造假数据呢？应该使用数据库的数据，使用Mybatis。而且，我上面的两个查询框也应该可以用，也就是Ajax获取数据的时候，要传参数

答案就是下一篇文章：https://www.cnblogs.com/yunquan/p/10398626.html

SpringBoot笔记十一：html通过Ajax获取后端数据的更多相关文章

用ajax获取后端数据，显示在前端，实现了基本计算器功能
下午在看视频的时候,遇到一个问题:如何把后端 print_r或echo的数据显示在前端.百度了一下,说是用ajax,想着前一阵子学习了ajax,并且最近也想做一个计算器,于是就自己钻起来了. 计算器的 ...
AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
vue获取后端数据放在created还是mounted方法里面？
问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...
用ajax获取后台数据，返回json数据，怎么在前台使用？
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文
jquery.autocomplete.js经过改动,支持各种浏览器.支持中文输入! 1.效果图例如以下 2.HTML和ajax代码 <!DOCTYPE html> <html xm ...
ajax获取json数据及实现跨域请求
最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
JS-利用ajax获取json数据，并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
Ajax获取接口数据，url拼接参数跳转页面，js获取上一级页面参数给本页面
1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...

随机推荐

Volatile的应用
.java 的执行过程 Java代码在编译后会变成Java字节码字节码被类加载器加载到JVM里 JVM执行字节码,转化为汇编指令在CPU上执行 Java中所使用的并发机制依赖于JVM的实现和CPU的 ...
Antenna Placement POJ - 3020 二分图匹配匈牙利拆点建图最小路径覆盖
题意:图没什么用给出一个地图地图上有点一次可以覆盖2个连续的点( 左右或者上下表示连续)问最少几条边可以使得每个点都被覆盖最小路径覆盖最小路径覆盖=|G|-最大匹配数 ...
进入Docker容器的4种方式
进入Docker容器的4种方式在使用Docker创建了容器之后,大家比较关心的就是如何进入该容器了,其实进入Docker容器有好几多种方式,这里我们就讲一下常用的几种进入Docker容器的方法. 进 ...
codeforces 1051F The Shortest Statement
题目链接:codeforces 1051F The Shortest Statement 题意:$q$组询问,求任意两点之间的最短路,图满足$m-n\leq 20$ 分析:一开始看这道题:fl ...
HNOI2019
省选总结 day0 写了下平时不经常写的模板,像什么$LCT$,圆方树,$exlucas$之类的,但是一个都没考. day1 提前十几分钟进了考场,可以提前动电脑,赶紧把$vimrc$打了 ...
自学华为IoT物联网_03 公共事业物联网常见问题及解决方案
点击返回自学华为IoT物流网自学华为IoT物联网_03 公共事业物联网常见问题及解决方案本文从以下六项公共事业,看看物联网的解决方案: 停车问题路灯管理问题消防栓管理问题井盖管理问题水表管 ...
Android assets的一个bug
摘要 Android assets目录下资源文件超过1MB的问题. 由于要显示一些奇奇怪怪的日文字符,我们在应用里放了一个字库文件,譬如叫做jp.ttf,放在assets目录下打包. 开发.调试一切正 ...
docker_flannel
目录一.安装etcd 安装运行验证二.安装和配置 flannel 三. Docker 中使用 flannel 配置 Docker 连接 flannel 容器连接到 flannel 网络四.f ...
「HAOI2018」染色解题报告
「HAOI2018」染色是个套路题.. 考虑容斥则恰好为$k$个颜色恰好为$c$次的贡献为 \[ \binom{m}{k}\sum_{i\ge k}(-1)^{i-k}\binom{m-k ...
luogu3242 接水果 (整体二分+树状数组)
考虑整体二分,问题就变成了每个(水果)路径有多少个满足条件(权值)的(盘子)子路径考虑一个盘子(a,b)表示两端点(不妨设dfn[a]<dfn[b]),那么他能接到的水果(u,v)一定满足(不 ...

SpringBoot笔记十一：html通过Ajax获取后端数据

SpringBoot笔记十一：html通过Ajax获取后端数据的更多相关文章

随机推荐

热门专题