Springmvc和ajax如何实现前后端交互

springmvc使用@RequestBody来获取前端的json字符串并转化为java对象

使用@ReponseBody来将返回的java对象转换为json形式返回前端

下面是几个使用springmvc和ajax进行前后端交互的简单实例

1.传递简单对象：

前端：

$(function(){
  $("#btn3").click(function(){
    //准备好要发的数组
    var array=[16,18,56];
    var jsonArray=JSON.stringify(array);
    $.ajax({
        "url":"send/three/array.html",
        "type":"post",
        "data":jsonArray,
        "dataType":"text",
      "contentType":"application/json;charset=UTF-8",
        "success":function (response) {
          alert(response);
        },
        "error":function (response) {
          alert(response);
        }
      }
    );
  });
});

后端：

@ResponseBody
@RequestMapping("/send/three/array.html")
public String testReceiveArrayThreee(@RequestBody List<Integer> array){
  for (int i : array) {
    System.out.println(i);
  }
  return "success";
}

结果：

2.传递复杂对象:

1.实体类：

public class Student {
  private Integer stuId;
  private String studentName;
  private Address address;
  private List<Subject> subjectList;
  private Map<String,String> map;
get和set方法省略
}
public class Subject {
    private String subjectName;
  private Integer subjectScore;}
public class Address {
  private String province;
  private String city;
  private String street;}

2.前端ajax:

$(function(){
  $("#btn4").click(function(){
    //准备要发送的数据
    var student={
      "stuId":5,
      "studentName":"tom",
      "address":{
        "province":"海南省",
        "city":"海南市",
        "street":"不知道"
      },
      "subjectList":[
        {
          "subjectName":"test",
          "subjectScore":60
        },
        {
          "subjectName":"ssm",
          "subjectScore":70
        }
      ],
      "map":{
        "k1":"v2",
        "k2":"v3",
        "k3":"v4"
      }
    };
    //json对象转化为json字符串
    var requestBody=JSON.stringify(student);
    $.ajax({
        "url":"send/compose/object.json",
        "type":"post",
        "data":requestBody,
      "contentType":"application/json;charset=UTF-8",
        "dataType":"json",
        "success":function (response) {
          console.log(response);
        },
        "error":function (response) {
          console.log(response);
        }
      }
    );
  });
});

后端：

@ResponseBody
@RequestMapping("/send/compose/object.html")
public String testComposeObject(@RequestBody Student student){
  System.out.println(student.toString());
  return "success";
}

结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • SpringMVC+Jquery实现Ajax功能

    一.什么是Ajax? Ajax:异步的JavaScript和Json(这里XML改为了Json): 作用:用于完成网页局部刷新功能(修改少量数据只用局部刷新,不用再整个网页重新加载): 二.SpringMVC和Jquery的简单介绍 SpringMVC:是基于Spring的一个子框架(MVC框架),功能强于Spring,这个框架主要是解决咱们Controller这一层的问题. M:model-模型User V:view-视图jsp C:Controller-控制器servlet jQuery框架

  • Springmvc完成ajax功能实例详解

    1.加入jackson的jar包 2.在响应的方法上加上@ResponseBody:把java对象转化为json对象 3.方法的返回值可以是对象集合字符串 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript"> $.post("ajax/Ajax1&quo

  • 利用SpringMVC和Ajax实现文件上传功能

    个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml

  • Ajax实现文件上传功能(Spring MVC)

    Ajax实现文件上传功能(Spring MVC)

    本文实例为大家分享了Ajax实现文件上传的具体代码,供大家参考,具体内容如下 前端表单 和 JQuery jsp/html代码 使用JQury <script src="static/js/jquery-3.4.1.js"></script> 前端表单 <form id="form-avatar" enctype="multipart/form-data"> <p>请选择要上传的文件:</p&

  • 解决SpringMVC接收不到ajaxPOST参数的问题

    问题 今天遇到一个问题,代码如下 java: @PostMapping(value = "/method") @ResponseBody public Object method(Integer id,String audit_content) { return null; } js: var data = {id:7,audit_content:"11111111111111111111a1"}; $.ajax({ type: "POST",

  • Spring MVC+ajax进行信息验证的方法

    本文是一个ajax结合Spring MVC使用的入门,首先我们来了解一下什么是Ajax AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.所以ajax对于提升用户体验十分重要 XMLHttpRequest 是 AJAX 的基础. 主要的方法有两种: var xmlhttp=new XMLHttpRequest(); xmlhttp.open(method,url,async) xmlhttp.se

  • springmvc+ajax+formdata上传图片代码实例

    最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下.上传文件的方式有多种,这里对使用FormData的方式进行说明. 1.springmvc项目想要上传文件,需要使用multipart方式,所以在spring-mvc.xml配置文件中需要增加multipart相关配置,代码如下 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultip

  • spring mvc利用ajax向controller传递对象的方法示例

    前言 最近因为工作的需要,在写一个基于springmvc+spring+mybatis的项目,其中涉及用ajax向controller发送数据的功能.因为不想使用spring的form标签,所以想看看有没有方法将ajax中的json数据直接转化为controller方法中的对象接收并处理.以下将逐渐介绍各种不同情况下传递json数据并封装的方法,下面话不多说,一起来看看详细的介绍: 基础类型 如果传递的json数据为基础类型(Int,String等)的话,则只需要用@RequestParam标注

  • Springmvc和ajax如何实现前后端交互

    springmvc使用@RequestBody来获取前端的json字符串并转化为java对象 使用@ReponseBody来将返回的java对象转换为json形式返回前端 下面是几个使用springmvc和ajax进行前后端交互的简单实例 1.传递简单对象: 前端: $(function(){ $("#btn3").click(function(){ //准备好要发的数组 var array=[16,18,56]; var jsonArray=JSON.stringify(array)

  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro

  • Node之简单的前后端交互(实例讲解)

    node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学node的朋友可以看一看.一方面理解服务端与客户端是如何交互的,一方面更熟悉node开发. 先贴代码:(有兴趣的可以copy到本地自己run一下) 主页面的html index.html: <!doctype> <html> <head> <meta charset=&

  • Django之提交表单与前后端交互的方法

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请求 GET 请求过程 前端通过ajax发起GET请求,json格式数据 var data = { "name": "test", "age": 1 }; $.ajax({ type: 'GET', url: /your/url/, data: dat

  • 详解Python flask的前后端交互

    详解Python flask的前后端交互

    目录 前端 index.html script.js 后端 app.py 总结 场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示. 按下按钮之前: 按下按钮之后: 代码结构 这是flask默认的框架(html写在templates文件夹内.css和js写在static文件夹内) 前端 index.html 很简单的一个select下拉选框,一个按钮和一个文本,这里的 {{ temp }} 是从后端调用的. <html> <head> <meta

  • Android的简单前后端交互(okHttp+springboot+mysql)

    Android的简单前后端交互(okHttp+springboot+mysql)

    前言 前阵子发现了个有意思又好用的框架--okHttp.由于课程设计需要,无意间发现了这个框架,打算利用此框架与后端交互,可以参考前后端分离的项目,把android当做前端,springboot当做后端,以下是二者的简单交互. okHttp说明 (1)android网络框架之OKhttp 一个处理网络请求的开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司贡献(该公司还贡献了Picasso) 用于替代HttpUrlConnection和Apache HttpClient (2)ok

  • Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

    Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

    目录 如何运用vue+echarts前后端交互实现动态饼图 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 如何运用vue+echarts前后端交互实现动态饼图 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动

  • Springboot运用vue+echarts前后端交互实现动态圆环图

    Springboot运用vue+echarts前后端交互实现动态圆环图

    目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa

  • SpringBoot使用WebSocket实现前后端交互的操作方法

    SpringBoot使用WebSocket实现前后端交互的操作方法

    目录 背景 实现 一.导入依赖 二.新建WebSocket配置类,注入Bean 三.新建WebSocket服务端,在其中处理websocket逻辑 四.客户端实现,可以借助FreeMarker模板工具直接写在ftl文件里. 五.测试 背景 我们都知道http协议只能在浏览器单方面向服务器发起请求时获得响应,然而服务器不能主动向浏览器推送消息,想要实现浏览器的主动推送目前有两种主流的实现方式: 轮询:缺点很多,但是实现简单 websocket: 在浏览器和服务器之间建立TCP连接,实现全双工通信

  • Node.js前后端交互实现用户登陆的实践

    目录 一.项目需求 二,开始撸代码 1,创建前端页面(CSS样式此处省略) 2.Node.js后端获取用户输入数据 最近学习了一点Node.js的后端知识,于是作为一个学习前端方向的我开始了解后端,话不多说,开始介绍.首先,如果你想要更好的理解这篇博客,你需要具备html,css,javascript和Node.js基础以及少许的SQL数据库知识.接下我们开始这个小项目. 一.项目需求 要求用户进入登陆界面,输入用户名和密码后,后端获取用户输入的表单信息,通过从数据库查找,如果正确,跳转登陆成功

随机推荐