ajax实现前后端数据交互

1.在做项目的时候，或多或少都会用到ajax来实现前后端数据的交互，接下来我们就看一个简单的实例吧。

实例效果：

点击按钮，发送异步请求，请求后端的数据，显示在网页上。

接下来我们就来实现一下吧。

1.实体类：
TableData.java


import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
public class TableData {private  int id;private  String username;private  String sex;private  String city;}

2.编写Controller,返回数据。

@RestController
@RequestMapping("/")
public class TableController {@RequestMapping("table/user")@ResponseBodypublic List<TableData> tableData(){List<TableData> list = new ArrayList<>();TableData tableData1 = new TableData(1,"扎三年","12","北京");TableData tableData2  = new TableData(2,"扎3年","13","北京");TableData tableData3  = new TableData(3,"扎4年","17","北京");TableData tableData4  = new TableData(4,"扎5年","18","北京");list.add(tableData1);list.add(tableData2);list.add(tableData3);list.add(tableData4);return list;}

3.前端使用ajax接收数据。这里我们导入Jquery.

前端index.jsp


<%@ page isELIgnored="false"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %><html>
<head><title>首页</title>
</head>
<body><input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center"><tr><td>id</td><td>姓名</td><td>年龄</td><td>城市</td></tr><tbody id="content"></tbody></table>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">$(function () {$('#btn').click(function () {$.post("table/user",function (data) {console.log(data);var html = "";for(var i = 0; i <data.length;i++){html += "<tr>" +"<td>"+ data[i].id+"</td>"+"<td>"+ data[i].username+"</td>"+"<td>"+ data[i].sex+"</td>"+"<td>"+ data[i].city+"</td>"+"</tr>";}$('#content').html(html);})})})</script>
</body>
</html>

思路很简单，给按钮一个点击时间，去请求后端的Controller,这里的 $.post(“table/user” 就是Controller中对应的路径。然后将返回的数据，显示到网页上即可，

这就是Ajax

ajax实现前后端数据交互相关推荐

前后端数据交互——ajax（原生及jquery）
目录前后端数据交互--ajax 1. 介绍 2.原生ajax用法 3.jquery的ajax 4.ajax原理说明前后端数据交互--ajax 1. 介绍 1.1 定义 Ajax(Asynchron ...
ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
前后端数据交互——ajax技术
在实际开发过程中,前端页面通常需要根据后台数据实现动态生成和实时更新,因此如何实现前后端数据交互成了开发过程中的难题. 现将使用ajax技术解决前后端数据的交互: (1)ajax技术介绍: ajax一 ...
前后端数据交互方法汇总
这篇文章给大家介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率.非常的详细,推荐给小伙伴们,有需要的小伙伴可以参考下. 1.HTML赋值输出到 Element 的 val ...
详解 AJAX-SpringBoot 前后端数据交互
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 "Asynchronous JavaScript and XML",即 &quo ...
前后端数据交互|分页查询|表格-双向绑定|get和post的区别
目录 1 前后端数据交互 1.1 前端代码部署在前端服务器 1.2 前端代码在浏览器展示(只展示页面,没有数据)----自给自足 1.3 前端/浏览器请求后端数据 (后端死数据)----给 ...
软件测试的交互,软件测试--前后端数据交互
作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一.所以就需要明白前后端数据是怎么进行交互的. 一.网站数据处理主要分为三层第一层,表示层,这部分可以用HTML ...
超详细总结：前后端数据交互原理
最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记. 互联网产品的前后端数据交互是通过一个通讯协议完成.前后台交互的协议主要包括HTTP,FTP,SMTP,T ...
干货 | 万字长文全面解析GraphQL，携程微服务背景下的前后端数据交互方案
作者简介古映杰,携程研发高级经理,负责前端框架和基础设施的设计.研发与维护.开源项目react-lite和react-imvc作者. 前言随着多终端.多平台.多业务形态.多技术选型等各方面的发展, ...

ajax实现前后端数据交互

ajax实现前后端数据交互

ajax实现前后端数据交互相关推荐

最新文章

热门文章