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

所属分类: 软件编程 / java 阅读数: 80
收藏 0 赞 0 分享

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";
}

结果:

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

更多精彩内容其他人还在看

Java基于反射机制实现全部注解获取的方法示例

这篇文章主要介绍了Java基于反射机制实现全部注解获取的方法,结合实例形式分析了java反射机制获取注解的具体实现方法与操作注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

Java 信号量Semaphore的实现

这篇文章主要介绍了Java 信号量Semaphore的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

eclipse+maven+spring mvc项目基本搭建过程

这篇文章主要介绍了eclipse+maven+spring mvc项目基本搭建过程,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Spring boot集成swagger2生成接口文档的全过程

这篇文章主要给大家介绍了关于Spring boot集成swagger2生成接口文档的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Spring boot具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

Java冒泡排序法和选择排序法的实现

这篇文章主要介绍了Java冒泡排序法和选择排序法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Spring Cloud Alibaba教程之Sentinel的使用

这篇文章主要介绍了Spring Cloud Alibaba教程之Sentinel的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Josephus环的四种解法(约瑟夫环)基于java详解

这篇文章主要介绍了Josephus环的四种解法(约瑟夫环)基于java详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Java继承Thread类创建线程类示例

这篇文章主要介绍了Java继承Thread类创建线程类,结合实例形式分析了java线程操作相关使用技巧与注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

Java使用Callable和Future创建线程操作示例

这篇文章主要介绍了Java使用Callable和Future创建线程操作,结合实例形式分析了java使用Callable接口和Future类创建线程的相关操作技巧与注意事项,需要的朋友可以参考下
收藏 0 赞 0 分享

springBoot使用JdbcTemplate代码实例

这篇文章主要介绍了springBoot使用JdbcTemplate代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多