Ajax前后端对接---Springmvc

Springmvc实现

实体类user

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {private String name;private int age;private String sex;}

我们来获取一个集合对象,展示到前端页面

@RequestMapping("/a2")
public List<User> ajax2(){List<User> list = new ArrayList<User>();list.add(new User("秦疆1号",3,"男"));list.add(new User("秦疆2号",3,"男"));list.add(new User("秦疆3号",3,"男"));return list; //由于@RestController注解,将list转成json格式返回
}

前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center"><tr><td>姓名</td><td>年龄</td><td>性别</td></tr><tbody id="content"></tbody>
</table><script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>$(function () {$("#btn").click(function () {$.post("${pageContext.request.contextPath}/a2",function (data) {console.log(data)var html="";for (var i = 0; i <data.length ; i++) {html+= "<tr>" +"<td>" + data[i].name + "</td>" +"<td>" + data[i].age + "</td>" +"<td>" + data[i].sex + "</td>" +"</tr>"}$("#content").html(html);});})})
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

成功实现了数据回显!可以体会一下Ajax的好处!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/327728.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

缓存在大型网站架构中的应用

缓存的基本知识 在整个计算机体系构造中&#xff08;无论是硬件层面还是软件层面&#xff09;&#xff0c;缓存都是无处不在的。 在计算机硬件构造中&#xff0c;由于两种介质的速度不匹配&#xff0c;高速介质在和低速介质交互时速度趋向低速方&#xff0c;这就导致了高速介质…

win10安装dockerx docker的常见命令 可以子腾讯云上做做练习

参考资料 https://www.jianshu.com/p/e8427d12b3e0 百度搜索 docker hub 可以查找 你需要的镜像 https://hub.docker.com/?utm_sourcegetting_started_guide&utm_mediumembedded_Windows&utm_campaignfind_whalesay https://blog.csdn.net/zzq060143/article/de…

Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持

Jexus 是一款运行于 Linux 平台&#xff0c;以支持 ASP.NET、PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器。最新版 5.8.2 已经发布&#xff0c;有如下更新&#xff1a; 1&#xff0c;现在大部分网站已经部署HTTPS&#xff0c;大家对于安全越来越重视&…

php移动代码,移动专区周级收录如何提交 复制这段php代码即可

今天我们来讲解下“移动专区的周级提交”很多朋友都在使用移动专区(之前的熊掌号)进行提交&#xff0c;但是天级提交只给10个额度&#xff0c;需要我们不断提交10个才会有所增长&#xff0c;但是我们可以使用“周级提交”可以直接享受5万的数据提交&#xff0c;对于我们站点的收…

搭建高可用的rabbitmq集群 + Mirror Queue + 使用C#驱动连接

我们知道rabbitmq是一个专业的MQ产品&#xff0c;而且它也是一个严格遵守AMQP协议的玩意&#xff0c;但是要想骚&#xff0c;一定需要拿出高可用的东西出来&#xff0c;这不本篇就跟大家说 一下cluster的概念&#xff0c;rabbitmq是erlang写的一个成品&#xff0c;所以知道如何…

Mybatis+mysql动态分页查询数据案例——配置映射文件(HouseDaoMapper.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"houseDao" ><result…

手机钉钉在进行视频会议时怎么录屏

https://www.iefans.net/info/v1037168.html 钉钉在进行视频会议时怎么录屏 编辑&#xff1a;秩名2020-03-24 10:14:52 钉钉 类型&#xff1a;效率办公 语言&#xff1a;简体中文 安卓下载 扫一扫下载游戏 钉钉是一款很好用的学习办公软件&#xff0c;它的工呢很多&#xf…

Vue3学习(后端开发)

目录 一、安装Node.js 二、创建Vue3工程 三、用VSCode打开 四、源代码目录src 五、入门案例——手写src 六、测试案例 七、ref和reactive的区别 一、安装Node.js 下载20.10.0 LTS版本 https://nodejs.org/en 使用node命令检验安装是否成功 node 二、创建Vue3工程 在…

微软Ignite大会约起来

今年的微软Ignite技术大会今天开始了&#xff0c;要好好学习哦&#xff0c;提供直播地址&#xff0c;通过阅读原文链接可以直达直播地址 http://soft.zdnet.com.cn/special/microsoft_ignite_2016。 大会亮点 创新 IT 技术飞速发展促发了更多行业创新&#xff0c;因此您和您的企…

aria2c rpc php,aria2c 的基本配置,附带傻瓜式源码

经常需要配置&#xff0c;但是 每次都需要查找配置项的意义&#xff0c;所以索性写在这里&#xff0c;以便有个记录&#xff0c;下次无需查找。aria2c -d/Users/blueboz/Downloads \-c \-D \-laria.log \-j5 -k1M \-x16 -s16 \--file-allocationnone \--enable-rpc \--load-coo…

最全Windows下搭建go语言开发环境以及开发IDE

https://www.cnblogs.com/ynhmonster/p/8335797.html GO语言开发环境的搭建---Windows环境下 1、Golang下载 我是通过Golang中国下载的&#xff0c;因为去官网下载十分慢&#xff0c;甚至没有进度条。 下载地址&#xff1a; https://www.golangtc.com/download 我选择的是go1…

外媒:微信小程序顺应“APP中启动APP”的行业潮流

BI中文站 11月30日报道 上周&#xff0c;中国网络巨头腾讯的高级副总裁张小龙对外披露了一些照片&#xff0c;显示聊天工具微信开始整合“小程序”。这一功能可以让微信的用户在无需下载软件的基础上&#xff0c;使用各种互联网应用服务&#xff0c;极大扩展微信的功能。 据外媒…

SpringMVC(笔记)

MVC简介 普通的web项目每次都要进行手动的把jar包导进去&#xff0c;否则会报500&#xff0c;class not found [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VstjHhuz-1609824493673)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images…

php 去掉url中的index.php,php 去掉url中的index.php

php去掉url中的index.php的方法&#xff1a;首先打开相应的代码文件&#xff1b;然后将if代码块嵌套在server代码块中&#xff1b;最后重启nginx服务器即可。本文操作环境&#xff1a;nginx1.0.4系统、PHP7.1版&#xff0c;DELL G3电脑nginx服务器去掉url中的index.php将if代码…

在ASP.NET Core中使用百度在线编辑器UEditor

0x00 起因 最近需要一个在线编辑器&#xff0c;之前听人说过百度的UEditor不错&#xff0c;去官网下了一个。不过服务端只有ASP.NET版的&#xff0c;如果是为了能尽快使用&#xff0c;只要把ASP.NET版的服务端作为应用部署在IIS上就可以立即使用了。不过我的需求并不急&#xf…

如何用TypeScript开发微信小程序

微信小程序来了&#xff01;这个号称干掉传统app的玩意儿虽然目前处于内测阶段&#xff0c;不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了。 工具和文档可以参考官方文档&#xff1a;https://mp.weixin.qq.com/debug/wxadoc/dev/?t1477926804193 Type…

八幅漫画理解使用JSON Web Token设计单点登录系统

上次在《JSON Web Token - 在Web应用间安全地传递信息》中我提到了JSON Web Token可以用来设计单点登录系统。我尝试用八幅漫画先让大家理解如何设计正常的用户认证系统&#xff0c;然后再延伸到单点登录系统。 如果还没有阅读《JSON Web Token - 在Web应用间安全地传递信息》&…

pg和oracle比较,Oracle与PostgreSQL使用差异对比与总结

JDBC连接&#xff1a;Oracle的jdbc连接字符串&#xff1a;db.urljdbc:oracle:thin:192.168.1.1:1521:ORCLPostgresql的连接字符串&#xff1a;db.urljdbc:postgresql:192.168.1.1:5432/database1、基本数据类型差异OraclePostgreSQLVarchar2varcharnumbernumericdatetimestamp/…

hibernate+struts2整合jar包冲突

前几天&#xff0c;在用HibernateStruts2做项目的时候遇到了一个很棘手的问题&#xff0c;jar包冲突&#xff01;&#xff01;&#xff01;先亮一下错误&#xff1a; 之前还不知道这是个啥错误&#xff0c;经过上网查找之后才知道这是jar包冲突的问题&#xff01;&#xff01;由…