前端Ajax以JSON格式获取后台数据
最近在用Thymeleaf做一个项目,耳边总是飘过前后端分离的话语,不得不去了解一下,在Thymeleaf里如何获取后端的json串,这里进行详细的讲解一下(困扰了我好久/哭了)
首先我们需要一个Controller,这个Controller用于视图的跳转,也就是走视图解析器的,当你访问一个网址时,他给你跳转到一个页面
package com.hzy.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;@Controller
public class Controller1 {@RequestMapping(value = "/hello",method = RequestMethod.GET)public String hello(){return "hello";}
}
当我们访问http://localhost:8080/hello的时候,会跳转到hello.html页面,我们写一个hello.html页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<button id="abc" type="button" value="按钮">按钮</button><script type="text/javascript">$("#abc").click(function () {$.ajax({url: '/getJson',type: 'get',dataType: 'json',data:JSON.stringify('jsonObject'),success:function(data){alert(data.msg);},error:function(){alert('服务器超时,请重试!');}});})</script>
</body>
</html>
这里的json就是从那个url里获取的,我们需要写一个controller,这个controller直接返回字符串,而不用走视图解析器
package com.hzy.controller;import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;@Controller
public class Controller2 {@RequestMapping(value = "/getJson")@ResponseBodypublic String getJson () {JSONObject jsonObject = new JSONObject();jsonObject.put("code",0);jsonObject.put("msg","成功");return jsonObject.toJSONString();}
}
这样当我们访问http://localhost:8080/hello的时候,就可以直接获取到json串了
前端Ajax以JSON格式获取后台数据相关推荐
- SpringBoot前端Ajax以JSON格式获取后台数据
最近在用Thymeleaf做一个项目,耳边总是飘过前后端分离的话语,不得不去了解一下,在Thymeleaf里如何获取后端的json串,这里进行详细的讲解一下(困扰了我好久/哭了) 首先我们需要一个Co ...
- 前端ajax传递json格式参数,后端springboot接收
在做开发的过程中,前端ajax传参和后端springboot接收参数经常用到,之前老是把这些搞混,导致出现错误,也在网上查阅了很多资料,再根据自己的经验和测试,对这部分内容做了一些使用总结.后面会再慢 ...
- 使用ajax获取后台数据怎么打印,我用ajax获取后台数据并展示在前端页面的方法【源码】...
<我用ajax获取后台数据并展示在前端页面的方法[源码]>由会员分享,可在线阅读,更多相关<我用ajax获取后台数据并展示在前端页面的方法[源码](2页珍藏版)>请在人人文库网 ...
- Ajax 提交json格式数据给后台
Ajax 提交json格式数据 在实际的开发当中,尤其是在前后端分离的项目中,传输数据都是以json格式进行传输的,所以对于json格式数据的情求和响应的学习十分重要. 1.前端提交json格式数据 ...
- Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers
前后端传输数据的编码格式(contentType) get请求数据就是直接放在url?后面的 url?usernmae=junjie&password=123... 可以向后端发送post请求 ...
- vue绑定后台数据ajax,vueJS 获取后台数据 绑定data
//vue 环境安装 http://blog.csdn.net/u013182762/article/details/53021374 一开始使用安装环境配置一些东西 ,后来发现太麻烦了 . 直接C ...
- ajax动态获取后台数据绘制echarts图表
Echarts是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻 ...
- ajax获取后台数据的几种方式及如何获取ajax内部的数据供外部使用
文章目录 1 ajax获取后台数据的几种方式 1.1 原生js的ajax方式 1.1.1 get 1.1.2 post 1.2 jQuery封装的ajax方式 1.2.1 $.ajax 1.2.2 $ ...
- bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
最新文章
- tickcount()修改成小时分钟_推出一分钟追剧新模式 首部真人漫改竖屏番《通灵妃》开播...
- Bw树:新硬件平台的B树(内存数据库中的b树索引)
- easyui 点滴记录
- vim永久取消空格颜色
- 【今日CV 计算机视觉论文速览 第145期】Fri, 19 Jul 2019
- js 获取当前gmt时间_javascript-如何将日期转换为GMT?
- AppStore苹果应用支付开发(In App Purchase)翻译
- 金蝶云php webapi,K/3 Cloud Web API销售出库单PHP完整示例【分享】
- 计算机在金属材料中的应用论文,浅谈金属材料在汽车轻量化中的应用论文
- redis集群的远程管理与监控
- 设置div背景透明的方法
- 前端应届生面试技巧,没有项目经验怎么应对?
- DW_axi_dmac控制器(概述)
- 从Xcode编译时自带的“图片压缩”说起
- RuntimeError: Sizes of tensors must match except in dimension 2. Got 5 and 4
- 随机漫步问题(醉汉行走)
- python pexpect_探索 Pexpect,第 2 部分:Pexpect 的实例分析
- 单片机错误操作导致JLINK无法烧写程序no cortex-m sw device found
- ktv点歌系统 Vue +Express+ Mongodb
- linux U盘传输速度