springBoot+ajax

最新推荐文章于 2024-05-16 17:36:28 发布
最新推荐文章于 2024-05-16 17:36:28 发布
阅读量4.5k 收藏 11
点赞数 4
分类专栏： Spring boot 文章标签： springBoot+ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangwjtt/article/details/84953013
版权

前台

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script th:src="@{/jquery-3.3.1.js}"></script>
<script>
	$(function(){
		$("#button").click(function(){
			var mYnum=$("#num").val()
			var mYage=$("#age").val()
			var mYpeer=$("#peer").val()
			$.ajax({
				type:"post",
				url:"/testajax",
				data:{num:mYnum,age:mYage,peer:mYpeer},
				dataType:'json',//dataType:"json",使得返回来的数据格式为json 如果不 添加该条属性，则返回来的为字符串
				success:function(data){
					console.log(data["num"]) //取值可以.key值
					console.log(data["age"]) //取值可以.key值
					console.log(data["peer"]) //取值可以.key值
				},
				error:function(data){
					console.log("error")
					console.log(data)
				}
			})
			
		})
		
	})
</script>
</head>
<body>
	<h1>欢迎</h1>
	<hr>
	<br>
	<form>
		num<input type="text" id="num"/><br>
		age<input type="text" id="age"/><br>
		peer<input type="text" id="peer"/><br>
		<input type="button" value="提交" id="button"/>
	</form>
</body>
</html>

后台

package test.controller;
import java.util.HashMap;
import java.util.Map;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import net.sf.json.JSONObject;

@RestController
public class AjaxController {

	@RequestMapping(value="/testajax",method=RequestMethod.POST)
	public JSONObject testAjax(@RequestParam("num") String num,@RequestParam("age") String age,@RequestParam("peer") String peer) {
		Map<String,String> map=new HashMap<String, String>();
		map.put("num", "AA "+num);
		map.put("age", "BB "+age);
		map.put("peer", "CC "+peer);
		JSONObject json=JSONObject.fromObject(map);
		System.out.println(json.toString());
		return json;
	}
}
wangwjtt
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
通过Ajax和SpringBoot交互的示例
LuoLiangDSGA的博客
08-02 7万+
1. 开始 1.1 说明 很久没有管理博客，这几天想了想，还是打算把日常学习的东西记录下来。公司最近项目需要用到SpringBoot，微服务在Spring社区的崛起，使得SpringBoot受到了更多的青睐。使用SpringBoot这个微框架，能够更加快速的构建web程序，相比于之前的SpringMVC，Struts2等框架，不需要 写各种各样繁琐的配置文件，只需要在pom文件中依...
Spring Boot Ajax示例
一名可爱的技术搬运工
05-30 570
本文将向您展示如何使用jQuery.ajax将HTML表单请求发送到Spring REST API并返回JSON响应。 使用的工具 ： Spring Boot 1.5.1。发布 Spring4.3.6。发布 Maven 3 jQuery的 引导程序3 注意 您可能对这个经典的Spring MVC Ajax示例感兴趣 1.项目结构 标准的Maven项目结构...
ajax和springBoot完整的交互过程
m0_46103359的博客
04-03 1304
下一篇写拦截器相关的，尝试去自己走一遍代码，写一下看看能不能写出来，之前完全没有自己写过拦截器都是跟着视频，这次自己写一下，然后记录一下博客写的过程。然后更改配置点击 File -> Project Structure->module->点击+号->选择web 将webapp放到main目录下即可。点击 File -> Project Structure->module->点击+号->选择web-> 选择create Artifact。项目基本已经搭建完成，开始测试ajax和后台交互！
springboot+ajax post上传图片或文件
最新发布
哈
05-16 237
确保Spring Boot应用程序在运行，并访问HTML页面，选择一个文件并点击“Upload”按钮，文件将通过Ajax上传到服务器，并保存在指定的目录中。使用Spring Boot和Ajax实现图片或文件上传是一项常见的任务，以下是一个简单的示例，展示如何完成这项任务。当前文章由AI生成，如果未能解决您的问题，可以点击我的主页和我取得联系，随时为您服务。
SpringBoot结合Ajax实现登录页面
Jiangtagong的博客
02-09 2453
手把手教你如何使用springboot实现ajax的登录页面！
详解 AJAX-SpringBoot 前后端数据交互
qq_41775769的博客
02-24 9180
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and XML“，即 ”异步的 JavaScript 和 XML“。其核心是通过 JavaScript 的 XMLHttpRequest 对象，以一种异步的方式，向服务器发送数据请求，并且通过该对象接收请求返回的数据，从而实现客户端与服务器端的数据交互。 优点：Ajax 能够刷新指定的页面区域（局部刷新），而不是刷新整个页面，从而减少客户端和服务器端之间的数
Spring Boot项目-Ajax的使用
wdfxfff的博客
04-03 4345
axaj的使用
springboot+ajax示例
08-02
SpringBoot与Ajax是现代Web开发中的两个重要技术，它们结合使用可以实现前后端的高效协作。SpringBoot简化了Spring框架的配置，提供了快速构建独立应用的能力，而Ajax则实现了页面的无刷新更新，提升了用户体验。 ...
基于springboot+ajax创建小区物业管理系统.zip
10-23
基于springboot+ajax创建小区物业管理系统.zip基于springboot+ajax创建小区物业管理系统.zip基于springboot+ajax创建小区物业管理系统.zip基于springboot+ajax创建小区物业管理系统.zip基于springboot+ajax创建小区...
springboot+ajax的小例子
04-20
在本项目"springboot+ajax的小例子"中，主要展示了如何使用SpringBoot框架与Thymeleaf模板引擎、SpringData JPA进行前后台交互，实现数据的增删查改（CRUD）操作。这个实例对初学者来说是极好的学习材料，能够帮助...
java基于springboot+ajax创建的小区物业管理系统源码，适合本科毕业设计，java大作业，课程设计作业等
06-19
java基于springboot+ajax创建的小区物业管理系统源码，适合本科毕业设计，java大作业，课程设计作业等 java基于springboot+ajax创建的小区物业管理系统源码，适合本科毕业设计，java大作业，课程设计作业等 java...
SpringBoot ajax get/post请求案例
做Java整整10年，目前是教别人写代码，嘿嘿
11-09 4207
本文主要是针对SpringBoot的ajax 请求、响应案例，配合适当注解，方便开发中使用，都是rest接口 $.ajax中contentType 和 dataType contentType：设置你发送给服务器的格式 dataType：设置你收到服务器数据的格式，json/text contentType 默认值：“application/x-www-form-urlencoded; charset=UTF-8” JSON.stringify()：将js数据转换为json格式 目录 ..
Springboot+Jpa+Ajax完成异步用户添加删除修改功能（超详细）
woshilishu的博客
04-17 3119
#说实话，我前端真的很一般，所以做这个要用js，css,我算是跌跌撞撞过来的...不过总算完成了 #实体类: Client: package com.example.main.classs; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.Gener...
ajax实例 spring,springboot+ajax示例
weixin_39915308的博客
08-05 235
【实例简介】springboot+ajax的小例子，适合初学者，可以参考博文http://blog.csdn.net/oppo5630/article/details/52093898【实例截图】【核心代码】SpringBootAjax└── SpringBootAjax├── pom.xml└── src├── main│ ├── java│ │ └── org│ │ ...
【Ajax 在SpringBoot中的使用 】
qq_44682003的博客
03-08 3248
Ajax 中文官网：https://jquery.cuishifeng.cn/jQuery.Ajax.html Ajax1、什么是ajax2、异步的好处3、Ajax在SpringBoot中的使用4、Json 使用5、无参数返回字符串的ajax请求6、无参数返回json类型的ajax请求7、有参数返回json类型的ajax请求1. 少量参数处理方案2、大量参数处理方案 1、什么是ajax AJAX即Asynchronous JavaScript and XML（异步JavaScript和XML），是实现客
Ajax在springboot项目中的使用
小小苏的小小苏
12-24 3188
Ajax简介 Ajax是一种web应用技术，可以借助客户端脚本（javascript）与服务端应用进行异步通讯，获取服务端数据以后，可以进行局部刷新，进而提高数据的响应和渲染速度。所有的Ajax请求都会基于DOM（HTML元素）事件，通过XHR（XMLHttpRequest）对象实现与服务端异步 通讯局部更新。 Ajax在 ...
spring boot 结合ajax技术
JIANtype的博客
03-06 660
一、Ajax介绍 Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML),指的是一种创建交互方式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。常用在，登录校验、后台更改数据项等领域。 二、Ajax的使用 下面的代码实现的是当inp...
(1) Ajax+SpringBoot
coco_19的博客
05-05 125
1.415错误 由于没有加contentType:"application/json;charset=utf-8",后台不知道改以什么格式解析数据 2.400错误 前端请求数据和后端数据结构不匹配 前端一定要用函数:JSON.stringify()严格的转化为JSON格式才行 转化后： 如果不进行转化的话： 即使在前端严格的写成{“username”:username，“password”:password}的格式也不行！！！ 最终成功代码 前端部分： $ = layui....
springboot + ajax 简单交互
热门推荐
大造梦家的博客
09-14 1万+
项目结构如图所示，由于没有使用thymeleaf模版所以删掉了文件夹： 前端页面代码： 登录页： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &lt...
写一段spring boot的Ajax请求
03-25
Sorry, 由于bot的限制，我不能给予高度技术性答案，以下是一个常见的Spring Boot Ajax请求的例子： ``` @RestController public class UserController { @Autowired private UserService userService; @GetMapping("/users") public List<User> getUsers() { return userService.getAllUsers(); } @PostMapping("/users") public User addUser(@RequestBody User user) { userService.addUser(user); return user; } @DeleteMapping("/users/{id}") public void deleteUser(@PathVariable("id") long id) { userService.deleteUser(id); } } ``` 这个例子中，我们定义了一个 `UserController` 作为我们的RESTful API入口。GET请求用于获取所有用户列表，POST请求用于添加用户，DELETE请求用于删除用户。`@RequestMapping` 是链接HTTP请求的注解，`@RequestBody` 是获取HTTP请求体内容的注解。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值