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

 更新时间:2020年05月06日 11:50:46   作者:第十八使徒  
这篇文章主要介绍了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";
}

结果:

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

相关文章

  • Spring cloud OpenFeign中动态URl、动态传递接口地址代码示例

    Spring cloud OpenFeign中动态URl、动态传递接口地址代码示例

    openFeign是作为微服务之间调用的解决方案,每个微服务项目是必不可少的,下面这篇文章主要给大家介绍了关于Spring cloud OpenFeign中动态URl、动态传递接口地址的相关资料,需要的朋友可以参考下
    2024-02-02
  • Java程序初始化启动自动执行的三种方式

    Java程序初始化启动自动执行的三种方式

    这篇文章主要介绍了Java程序初始化启动自动执行的三种方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • SpringBoot整合MyBatis超详细教程

    SpringBoot整合MyBatis超详细教程

    这篇文章主要介绍了SpringBoot整合MyBatis超详细教程,下面从配置模式、注解模式、混合模式三个方面进行说明MyBatis与SpringBoot的整合,需要的朋友可以参考下
    2021-05-05
  • 详解Java关于时间格式化的方法

    详解Java关于时间格式化的方法

    这篇文章主要介绍了详解Java关于时间格式化的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • SpringBoot与单元测试JUnit的结合操作

    SpringBoot与单元测试JUnit的结合操作

    这篇文章主要介绍了SpringBoot与单元测试JUnit的结合操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-10-10
  • log4j的配置文件详细解析

    log4j的配置文件详细解析

    以下小编主要为大家介绍一下log4j的配置文件各个配置项的含义。需要的朋友可以过来参考下
    2013-08-08
  • Java中Lambda表达式和函数式接口的使用和特性

    Java中Lambda表达式和函数式接口的使用和特性

    Java Lambda表达式是一种函数式编程的特性,可简化匿名内部类的写法,与函数式接口搭配使用,实现代码简洁、可读性高、易于维护的特点,适用于集合操作、多线程编程等场景
    2023-04-04
  • Java Math.round函数详解

    Java Math.round函数详解

    这篇文章主要介绍了Java Math.round函数详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • IDEA打包应用程序的教程图解

    IDEA打包应用程序的教程图解

    这篇文章主要介绍了IDEA打包应用程序的教程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • java中ResultSet遍历数据操作

    java中ResultSet遍历数据操作

    这篇文章主要介绍了java中ResultSet遍历数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论