SpringBoot和Ajax通信
Maven文件：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.4.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.wuyilong</groupId><artifactId>demo</artifactId><version>0.0.1-SNAPSHOT</version><name>demo</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>
控制层：
package com.demo.controller;import com.demo.entity.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;/*** @Auther: wuyilong* @Date: 2019/4/11 09:20* @Description:*/
@Controller
@RequestMapping("/test")
public class TestController {@GetMapping(value = "/index")public String index() {return "index";}@RequestMapping(value = "/ajax", method = RequestMethod.POST)@ResponseBody//@RequestBody是作用于参数的，它实现了把客户端传过来的json数据解析为对象，作为参数传进来，不过客户端传过来的数据类型必须是application/json,不然会出错private User ajax(@RequestBody User user) {System.out.println("收到ajax请求");System.out.println(user.getName());User u = new User();u.setId("1");u.setName("user");u.setPassword("1234");return u;}}
User类
package com.demo.entity;/*** @Auther: wuyilong* @Date: 2019/4/11 09:19* @Description:*/
public class User {private String id;private String name;private String password;public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}
}
前端页面：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script>function myfun() {alert("message");$.ajax({type:"post",url:"/test/ajax",contentType:"application/json;charset=utf-8",data:'{"id":"1","name":"asd","password":"abc"}',dataType:"json", // 这里声明收到的服务器的响应数据类型，如果是json的话，不声明也可以正常使用success:function (data) {//响应成功后回调函数alert("收到响应");$("#r").html(JSON.stringify(data)); //这里将json转为字符串显示(data其实是个object,不转换的话会显示为一片空白)},error:function () {alert("error");}});}</script></head>
<body><button id="btn" type="button" οnclick="myfun()">Click Me!</button>
<p id="r"></p></body>
</html>
前端页面测试2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script>function myfun() {alert("message");var param = {}param.id = $("#id").val();param.name = $("#name").val();param.password = $("#password").val();$.ajax({type:"post",url:"/test/ajax",contentType:"application/json;charset=utf-8",data: JSON.stringify(param), // JSON.stringify() 将JS对象转化为JSON格式dataType:"json", // 这里声明收到的服务器的响应数据类型，如果是json的话，不声明也可以正常使用success:function (data) {//响应成功后回调函数alert("收到响应");$("#r").html(JSON.stringify(data)); //这里将json转为字符串显示(data其实是个object,不转换的话会显示为一片空白)},error:function () {alert("error");}});}</script></head>
<body><p>id: <input type="text" name="id" /></p>
<p>name: <input type="text" name="name" /></p>
<p>password: <input type="text" name="password" /></p><button id="btn" type="button" οnclick="myfun()">Click Me!</button>
<p id="r"></p></body>
</html>
测试2运行：
总结：
1、JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串
2、contentType:"application/json;charset=utf-8",//这里很重要，不能省略，因为默认的类型是application/x-www-form-urlencoded,如果不设置的话后台就无法使用@RequestBody正常接收
3、data:'{"id":"1","name":"asd","password":"abc"}' ,//这里有一点尤其要注意，在网上查到的资料有的是{"key":"value"}这种形式的，大括号两端没有引号，经过测试，这样是不行的，必须整个加上引号
4、dataType:"json",//这里声明收到的服务器的响应数据类型，如果是json的话，不声明也可以正常使用
5、如果需要返回json或者xml或者自定义mediaType内容到页面，则需要在对应的方法上加上@ResponseBody注解
原文：https://blog.csdn.net/qq_35603331/article/details/75094935
转载于:https://www.cnblogs.com/wylwyl/p/10687970.html
SpringBoot和Ajax通信相关推荐
- Springboot与Ajax整合练习？
Springboot与Ajax整合练习? RunApp package cn.tedu;import org.springframework.boot.SpringApplication; impor ...
- c#实现ajax通信：向后台发送JSON字符串，接收响应字符串，并转换为对象
全栈工程师开发手册 (作者:栾鹏) c#教程全解 c#实现ajax通信,通过向服务器后台发送json数据,接收响应数据提交给前台. 其中包含两个主要函数,发送数据,接收响应数据的Http请求响应函数. ...
- 基于javaweb+jsp的个人日记管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap Ajax)
基于javaweb+jsp的个人日记管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap Ajax) 运行环境 Java≥8.MySQL≥5. ...
- 基于javaweb+jsp的个人日记管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)
基于javaweb+jsp的个人日记管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax) JavaWeb JavaBean JSP MVC ...
- springboot使用ajax上传文件
SpringBoot使用Ajax上传文件 接上一个上传文件操作 上次使用的是from表单进行提交 这次我们使用ajax进行提交 地址在这儿:springboot上传文件 上次controller层已经 ...
- 基于javaweb+jsp的健身房信息管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)
基于javaweb+jsp的健身房信息管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax) 运行环境 Java≥8.MySQL≥5.7.T ...
- 基于javaweb+jsp的二手物品交易管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)
基于javaweb+jsp的二手物品交易管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax) JavaWeb JavaBean JSP M ...
- 基于javaweb+jsp的敬老院养老院管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap Ajax)
基于javaweb+jsp的敬老院养老院管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap Ajax) JavaWeb JavaBean J ...
- 基于javaweb+jsp的服装店门店信息管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)
基于javaweb+jsp的服装店门店信息管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax) JavaWeb JavaBean JSP ...
最新文章
- Ubuntu12.04LTS添加broadcom 802.11g无线网卡驱动
- 项目管理——WBS工作分解法
- Android Hanlder综合
- boost::container模块实现范围分配器用法
- python中if else语句_python 中if else 语句的作用及示例代码
- html页面 sql注入,使用html仅阻止SQL注入
- 笛卡尔坐标系_笛卡儿坐标系
- swift 高级进阶1：类与结构体（上）
- 【源码更新】活动报名登记预约问卷表单系统微信小程序支持导入导出自定义表单填报字段
- HBO宣布续订《西部世界》第三季
- 学小易有微型计算机接口答案吗,学小易接口更新+新的接口+成品
- html点击出现对勾,css伪类右下角点击出现对号角标表示选中的代码
- App性能测试过程记录
- 巨量算数data解密
- gravity mysql_gravity 使用操作。
- 关于uniapp小程序发布新版本，小程序不及时更新问题记录
- 淘宝天猫背后，有一个你不知道的神秘组织
- 【安卓笔记】如何设置模拟器的IP
- 如何理解Precision和Recall?
- 人工智能教程 - 1.1.1 什么是神经网络