ajax datatype_springboot|前端发ajax请求到后台Controller及常见的坑

最新推荐文章于 2022-01-21 09:46:34 发布
最新推荐文章于 2022-01-21 09:46:34 发布
阅读量197 收藏
点赞数
文章标签： ajax datatype ajax put请求 ajax下拉框回显数据 ajax怎么获取下拉框的值 ajax跳转controller后判断返回值 controller接收json数据

前端发ajax请求

这块是web的基础,发web请求大概需要以下几步1.引用web相关的依赖2.前端页面引入jquery.js3.编写ajax请求4.编写对应的Controller

引入web相关的依赖

前端的模板选用的是thymeleaf

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'implementation 'org.springframework.boot:spring-boot-starter-web'

引入jquery

jquery可以通过本地的方式引入,也可以通过cdn的方式引入本地引入:先下载jquery.js到static/js目录html页面head中添加:

<head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="/static/js/jquery-3.4.1.min.js">script>head>

如果是CDN话,则不用下载jquery , 直接在head中引入

<head>    <meta charset="UTF-8">    <title>Titletitle>    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">script>head>

编写ajax请求

参考文档:https://api.jquery.com/jQuery.ajax/这里只展示一些常用的参数

$.ajax({        url:'/test/testAjax1',        type:'get',        async:false,        contentType:'application/json',        dataType:'json',        success:function (data) {            console.log(data)        }    })

url:请求后台的urltype:标明是get还是post请求async:是异步的还是同步的,这里有个坑,有时候下拉框用ajax去请求数据,这里默认是异步的,结果数据还没回来,下拉框就开始渲染,然后发现下拉没有数据contentType: 前端的参数格式dataType:接口返回的数据的格式,一般来说,经常不写,让系统自己去判定这里ContentType的值一般来说有两种取值, 默认是application/x-www-form-urlencoded; charset=UTF-8在实际开发中,经常会改成如上的application/json这里改了之后,Controller中也要对应着改入参方式,详情可参考这篇DEMO:springboot|Controller接收处理GET,POST请求入参https://www.javastudy.cloud/articles/2019/11/03/1572752115551.html

Controller接收请求

/** * @Author https://www.javastudy.cloud * @CreateTime 2019/11/8 **/@RestControllerpublic class TestController {    @RequestMapping("test/testAjax1")    public Map testAjax1(){        Mapmap = new HashMap<>();        map.put("aaa","bbb");        return map;    }    }

结果输出

c14e68af78d274c94b2875e7bd7a6d30.png

DEMO总评

ajax请求是web开发中的第一步,我们可以按Http请求来理解他, 有相应的header,有相关的各种type , 其中最麻烦的是要和后端Controller的参数对应关系,稍不留神对应错了后端就收不了参数,或者值没法返回,要多看文档,注意默认值.

可添加小刀微信获取源码

13582e645bbb9e649b47babccf077f63.png

7b4b95ae44f44f838d16a9a62624bdd2.png往期热文springboot|springboot配置Filter过滤器springboot|springboot配置拦截器docker|docker 安装zookeeperjava基础|自定义java线程池你点 在看的样子真好看：)～
weixin_39855186
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax post 请求后端，server返回Map结果集
01-22 4186
一、应用场景 当前端发出Ajax请求，后端需要返回Map结果集 二、代码 1、ResultFactory.java package com.XXXX.tv.vrs.service.util; import java.util.HashMap; import java.util.Map; public class ResultFactory { public static
springboot怎么返回ajax,springbootajax查看直接能够返回查询页面
weixin_42360846的博客
08-05 482
@Controller@RequestMapping("/activity/")public class ActivityController {javascript@Autowiredprivate ActivityService activityService;@RequestMapping("doSaveObject")public String doSaveObject(Activity ...
[SpringBoot2]ajax函数中data参数的数据设置方式
m0_51955470的博客
01-21 408
ajax函数中data参数的数据设置方式：
mybatis的mapper返回map结果集(springboot)
weixin_30631587的博客
12-19 615
通过MapKey指定map的key值 @MapKey("id") Map<Long, UserInfo> getUserInfoMap(); @MapKey("id") Map<Long, Map<String,Object>> getUserValueMap(); map的value为java类 <resultMap id="U...
ajax跳转controller后判断返回值_SpringBoot2编写第一个Controller
weixin_39631467的博客
11-24 225
前言:SpringBoot的Controller模块用的是SpringMvc，所以用法和MVC没有差异。该文章主要讲解1.如何接收一个请求2.如何获取请求的参数3.常用的两种返回值JSONObject和ModelAndView4.GET请求和POST请求5.获取路径参数6.HttpServletRequest和HttpServletResponse对象1.新建一个HelloController.j...
spring mvc利用ajax向controller传递对象的方法示例
08-29
【Spring MVC 利用Ajax向Controller传递对象】在开发Web应用时，经常需要在前端与后端之间交换数据。Spring MVC框架提供了多种方式来处理这种交互，尤其是通过Ajax进行异步通信时。本文将深入探讨如何使用Ajax向...
ajax提交表单到后台
01-19
本主题将深入探讨如何使用jQuery库的AJAX功能将表单数据提交到后台，以及后台如何使用Spring框架来处理这些数据。下面将详细阐述这一过程。 ### 一、前端：使用jQuery的AJAX提交表单 1. **引入jQuery库**：首先...
[SpringBoot+Ajax]跨域资源共享CORS前后端分离简单演示样例.rar
11-30
这个示例项目应该包含了一个简单的SpringBoot后端服务和一个使用Ajax进行请求的前端页面。通过运行项目，你可以观察到CORS配置如何使跨域请求成功执行。同时，这也是一个很好的学习资源，帮助理解SpringBoot、Ajax和...
通过Ajax请求动态填充页面数据的实例
10-18
【Ajax请求动态填充页面数据】是一种常见的前端技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术基于异步JavaScript和XML（Asynchronous JavaScript and XML），但实际上...
使用springmvc整合ajax请求demo代码示例
最新发布
02-28
public class AjaxController { @RequestMapping(value = "/ajaxRequest", method = RequestMethod.POST) @ResponseBody public String handleAjaxRequest(@RequestParam("param1") String param1) { // 处理...
SpringBoot 校验回显信息--Ajax请求Controller后返回Map--校验提示赋值
word_joke的博客
11-05 2512
直接上代码： 第一： Controller类的方法：     @ResponseBody     @RequestMapping("/USER/Check")     public Map&lt;String,String&gt; userManagePost(Model model, @Valid User user, BindingResult bindingResult) {      ...
SpringBoot实用性Controller类返回参数
weixin_44641729的博客
03-22 447
SpringBoot实用性Controller类返回参数 import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import org.apache.http.HttpStatus; public class R extends HashMap<String, Object> { pr...
controller接收Map类型，ajax传递Map类型参数
qqnbsp的博客
08-16 3640
type: "post", dataType:'json', data: {"start":1,"limit":10}, @RequestPrameter Map<String, Object> params 上面分别是前台ajax和后台controller
前端设置发送给服务器的格式和接收服务器数据的格式
darkCloudss的博客
06-18 1153
contentType: "application/json; charset=utf-8",//发给服务器的格式 dataType:'json',//接收服务器数据的格式
【转载】Ajax与Controller数据交互
f789456x的博客
01-07 476
转自：https://www.cnblogs.com/kasi/p/8443289.html 1.概念 在ssm框架下实现Ajax与Controller之间各种类型数据的数据交互,从Ajax传值和Controller返回值两个方面理解 1.1 从Ajax → Controller 无论Ajax以什么形式发送数据,在Controller中的接收方法都没有差异 对象 操作 key/value类型 JSON 序列化表单 Ajax 发送 data:“name=”+name data:{“name”:name} da
ajax 取值 返回map_ajax请求后台返回map类型并如何展示
weixin_39752434的博客
12-22 435
前台jsp或者ftl文件接收返回结果：注意：value值用单引号，因为后台返回的结果是json字符串前台js接收返回结果：success: function(data){var result = jQuery.parseJSON(data);//也可以这么写：JSON.parse(data);if(result.isCopied=="true"){myAlert1('复制页面成功!');setTi...
利用ajax请求，后台返回map，ajax中解析map数据
热门推荐
荒的博客
10-24 1万+
后台返回的数据为： Map&lt;String, String&gt; mapList = new HashMap&lt;String, String&gt;(); mapList.put(key, value); Map&lt;String, Map&lt;String, String&gt;&gt; map = new HashMap&lt;String,Map&lt;String, St...
Spring Boot Ajax 提交对象类型
a3521553a的博客
04-21 631
在任何一个平台都逃离不了ajax的操作,本篇记录Spring Boot用ajax提交object到后台的操作方法。 JavaScript let object = { name: "name", password: "password", telephone:"telephone", child:{"id":"id"} }; $.ajax({
前端html使用ajax发送json到后端springboot，代码展示与步骤讲解
04-04
前端使用ajax发送json到后端springboot的步骤如下： 1. 创建一个html页面，添加一个按钮或表单，用于触发ajax请求。 2. 在html页面中引入jquery或其他ajax库，以便能够使用ajax方法发送请求。 3. 编写ajax请求代码，包括请求的URL、请求方法、请求头、请求体等参数，并指定请求成功或失败后的回调函数。 4. 在后端springboot项目中创建一个controller，用于接收前端发送的json数据。 5. 在controller中编写方法，用于处理接收到的json数据，并返回处理结果。 6. 在springboot项目中启动应用程序，并打开html页面，点击按钮或提交表单，发送ajax请求。 7. 后端springboot应用程序接收到请求后，执行对应的controller方法，处理json数据，返回处理结果。 下面是一个简单的示例代码，演示了如何使用ajax发送json到后端springboot： 前端html代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AJAX发送JSON数据到后端Spring Boot</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <h1>AJAX发送JSON数据到后端Spring Boot</h1> <input type="button" value="发送JSON数据" onclick="sendJson()"> <script type="text/javascript"> function sendJson() { var json = { "name": "张三", "age": 18, "gender": "男" }; $.ajax({ url: "/json", type: "POST", contentType: "application/json", data: JSON.stringify(json), dataType: "json", success: function(data) { alert("处理结果：" + data.result); }, error: function() { alert("请求失败！"); } }); } </script> </body> </html> ``` 前端的ajax请求代码： ``` function sendJson() { var json = { "name": "张三", "age": 18, "gender": "男" }; $.ajax({ url: "/json", type: "POST", contentType: "application/json", data: JSON.stringify(json), dataType: "json", success: function(data) { alert("处理结果：" + data.result); }, error: function() { alert("请求失败！"); } }); } ``` 后端springboot的controller代码： ``` @RestController public class JsonController { @PostMapping("/json") public Map<String, Object> handleJson(@RequestBody Map<String, Object> json) { Map<String, Object> result = new HashMap<>(); // 处理json数据 result.put("result", "处理成功"); return result; } } ``` 在这个示例中，前端发送了一个包含name、age和gender三个属性的json数据到后端springboot应用程序的/json接口。后端接收到json数据后，执行了handleJson方法，处理了json数据，并返回了一个包含result属性的json数据，前端收到响应后，弹出处理结果的提示框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值