AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Springboot+ajax传输json数组以及单条数据的方法

2018-08-19 2202
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云数据库 RDS MySQL，集群系列 2核4GB
推荐场景：
搭建个人博客
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
云数据库 RDS MySQL，高可用系列 2核4GB
简介： Springboot+ajax传输json数组以及单条数据的方法下面是用ajax传输到后台单条以及多条数据的解析的Demo:结构图如下:image下面是相关的代码:pom.

Springboot+ajax传输json数组以及单条数据的方法

下面是用ajax传输到后台单条以及多条数据的解析的Demo:

结构图如下:

img_1e25647942f8c3083a8b7d4c42f0c40d.png
image

下面是相关的代码:

pom.xml:

<?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>
    <groupId>com.example</groupId>
    <artifactId>springboot-ssm</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>springboot-ssm</name>
    <description>Demo project for Spring Boot</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.9.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <!--以下两项需要如果不配置，解析themleaft 会有问题-->
        <thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.0.5</thymeleaf-layout-dialect.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>

        <!--mybatis与mysql-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.2.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--druid依赖-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.0.25</version>
        </dependency>

        <!--添加static和templates的依赖-->
        <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>

        <!--解析json-->
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

StudentController:

package com.home.controller;
import com.home.entity.Student;
import com.home.service.StudentService;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;

@Controller
public class StudentController {

    @Autowired
    private StudentService studentService;


    @RequestMapping("/list")
    @ResponseBody
    public List<Student> list() {
        List<Student> studentList = studentService.getAllStu();
        return studentList;
    }


    @RequestMapping("/tableList")
    public String tableList(Model model) {
        List<Student> studentList = studentService.getAllStu();
        model.addAttribute("studentList", studentList);
        return "jsonArray";
    }


    @RequestMapping("/goToAdd")
    public String goToAdd() {
        return "add";
    }


    @RequestMapping("/add")
    public String add(Student stu) {
        studentService.insert(stu);
        return "result";
    }


    @RequestMapping("/goToAddJson")
    public String goToAddJson() {
        return "json";
    }


    @RequestMapping("/jsonArrayAdd")
    @ResponseBody
    public String jsonaAdd(@RequestParam("ids") String ids) {

        System.out.println(ids);

        JSONArray jsonArray = JSONArray.fromObject(ids);
        for (int i = 0; i < jsonArray.size(); i++) {
            JSONObject jsonObject = jsonArray.getJSONObject(i);
            System.out.println("json数组传递过来的参数为:" + "第" + i + "条:" + "\n" + jsonObject.get("id"));
        }
        return "json数组添加成功了";
    }


    //json数组传递

    @RequestMapping("/jsonAdd")
    @ResponseBody
    public String jsonArrayAdd(@RequestParam("ids") String ids) {

        JSONObject jsonObject = JSONObject.fromObject(ids);
        System.out.println("jsonObject==>" + jsonObject);
        Student stu = (Student) JSONObject.toBean(jsonObject, Student.class);
        System.out.println("stu==>" + stu);
        return "成功了!";
    }

}

Student:

package com.home.entity;
import java.io.Serializable;
public class Student implements Serializable {

    private Integer id;
    private String name;
    private Integer age;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    @Override
    public String  toString() {
        return "Student{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", age=" + age +
                '}';
    }
}

StudentMapper:

package com.home.mapper;

import com.home.entity.Student;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;

@Mapper
public interface StudentMapper {
    List<Student> getAllStu();
    int deleteByPrimaryKey(Integer id);

    int insert(Student record);

    int insertSelective(Student record);

    Student selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Student record);

    int updateByPrimaryKey(Student record);
}

StudentService:

package com.home.service;

import com.home.entity.Student;

import java.util.List;

public interface StudentService {
    List<Student> getAllStu();

    void insert(Student stu);
}

StudentServiceImpl:

package com.home.service.impl;
import com.home.entity.Student;
import com.home.mapper.StudentMapper;
import com.home.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;

@Service
public class StudentServiceImpl implements StudentService {

    @Resource
    private StudentMapper studentMapper;

    @Override
    public List<Student> getAllStu() {
        return studentMapper.getAllStu();
    }

    @Override
    public void insert(Student stu) {

     studentMapper.insert(stu);

    }
}

StudentMapper.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.home.mapper.StudentMapper" >


    <resultMap id="BaseResultMap" type="com.home.entity.Student" >
        <id column="id" property="id" jdbcType="INTEGER" />
        <result column="name" property="name" jdbcType="VARCHAR" />
        <result column="age" property="age" jdbcType="INTEGER" />
    </resultMap>


    <sql id="Base_Column_List" >
    id, name, age
  </sql>
    <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer" >
        select
        <include refid="Base_Column_List" />
        from student
        where id = #{id,jdbcType=INTEGER}
    </select>
    <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer" >
    delete from student
    where id = #{id,jdbcType=INTEGER}
  </delete>
    <insert id="insert" parameterType="com.home.entity.Student" >
    insert into student (id, name, age
      )
    values (#{id,jdbcType=INTEGER}, #{name,jdbcType=VARCHAR}, #{age,jdbcType=INTEGER}
      )
  </insert>
    <insert id="insertSelective" parameterType="com.home.entity.Student" >
        insert into student
        <trim prefix="(" suffix=")" suffixOverrides="," >
            <if test="id != null" >
                id,
            </if>
            <if test="name != null" >
                name,
            </if>
            <if test="age != null" >
                age,
            </if>
        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides="," >
            <if test="id != null" >
                #{id,jdbcType=INTEGER},
            </if>
            <if test="name != null" >
                #{name,jdbcType=VARCHAR},
            </if>
            <if test="age != null" >
                #{age,jdbcType=INTEGER},
            </if>
        </trim>
    </insert>
    <update id="updateByPrimaryKeySelective" parameterType="com.home.entity.Student" >
        update student
        <set >
            <if test="name != null" >
                name = #{name,jdbcType=VARCHAR},
            </if>
            <if test="age != null" >
                age = #{age,jdbcType=INTEGER},
            </if>
        </set>
        where id = #{id,jdbcType=INTEGER}
    </update>
    <update id="updateByPrimaryKey" parameterType="com.home.entity.Student" >
    update student
    set name = #{name,jdbcType=VARCHAR},
      age = #{age,jdbcType=INTEGER}
    where id = #{id,jdbcType=INTEGER}
  </update>


    <select id="getAllStu" resultType="com.home.entity.Student">
        select * from student
    </select>
</mapper>

SqlMapperConfig.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!-- <settings> 开启二级缓存 <setting name="cacheEnabled" value="true" /> </settings> -->
    <!-- 只需要定义个别名,这个应该有 -->
    <!-- springboot集成pageHelper(Java配置未注入的时候可以用下面配置) -->
    <!--    <plugins>
            com.github.pagehelper为PageHelper类所在包名
            <plugin interceptor="com.github.pagehelper.PageInterceptor">
                使用下面的方式配置参数，后面会有所有的参数介绍
                <property name="helperDialect" value="mysql" />
            </plugin>
        </plugins> -->
</configuration>

json.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<script src="${pageContxt.request.contextPath}/jquery-3.3.1/jquery-3.3.1.min.js"></script>-->
    <script type="text/javascript" th:src="@{../static/jquery-3.3.1/jquery-3.3.1.min.js}"></script>
</head>
<body>

<p>这个页面使用的是json的传输:</p>
<form th:action="@{/} " th:method="post">
    id:<input id="id" type="text" name="id"><br/>
    name:<input id="name" type="text" name="name"><br/>
    age:<input id="age" type="text" name="age"><br/>
</form>
<button onclick="tijiao()">提交json</button>
<script>

    function tijiao() {
        var id = $("#id").val().trim();
        var name = $("#name").val().trim();
        var age = $("#age").val().trim();

        console.log("id:" + id + "  name:" + name + "  age:" + age);

        var stu = {
            id:id,name:name,age:age
        }

        $.ajax({

            type:"post",
            url:"/jsonAdd",
            datatype:"json",
            data:{ids:JSON.stringify(stu)},
            success:function(data){
                alert(data) ;
            }
        });

    }

</script>
</body>
</html>

jsonArray.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{../static/jquery-3.3.1/jquery-3.3.1.min.js}"></script>

</head>
<body>
<table border="1" id="stuTable">
    <tr>
        <td>是否选中</td>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>

    <tr th:each="stu:${studentList}">
        <td><input th:type="checkbox" th:name="id" th:value="${stu.id}"></td>
        <td th:text="${stu.id}">编号</td>
        <td th:text="${stu.name}">姓名</td>
        <td th:text="${stu.age}">年龄</td>
    </tr>
</table>
<button id="pltj">批量提交</button>
<script>
    $("#pltj").click(
        function () {
            var checkbox = $("#stuTable").find(":checked");
            console.log(checkbox);
            if (checkbox == 0) {
                return;
            } else {
                var str = [];
                for (var i = 0; i < checkbox.length; i++) {
                    var ck = checkbox[i];
                    var a = $(ck).val().trim();
                    str.push({id: a});
                    console.log("str==>" + str);
                }
                $.ajax({

                    url: "/jsonArrayAdd",
                    datatype: "json",
                    data: {ids: JSON.stringify(str)},
                    success: function (data) {
                        alert(data);
                    }
                });
            }

        });

</script>
</body>
</html>

application.properties:

#server.port=80
logging.level.org.springframework=DEBUG
#springboot   mybatis
#jiazai mybatis peizhiwenjian
mybatis.mapper-locations = classpath:mapper/*Mapper.xml
mybatis.config-location = classpath:mybatis/sqlMapperConfig.xml
#mybatis.type-aliases-package = com.demo.bean
#shujuyuan
spring.datasource.driver-class-name= com.mysql.jdbc.Driver
spring.datasource.url = jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8
spring.datasource.username = *******
spring.datasource.password = *******
spring.thymeleaf.prefix=classpath:/templates/

运行后选择两项,可以得到选中的那一行的id值,进行批量操作了:

img_584a59cae59be04b2c0ec6a8873c8a20.png
image
文章标签：
云数据库 RDS MySQL 版
Java
数据格式
Web App开发
JSON
数据库连接
关键词：
JSON方法
Spring Boot方法
JSON数据
Spring Boot数据
ajax数据
相关实践学习
如何在云端创建MySQL数据库
开始实验后，系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心，利用清洁计算为万物互联的新世界提供源源不断的能源动力，目前开服的区域包括中国（华北、华东、华南、香港）、新加坡、美国（美东、美西）、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程，来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品：云服务器ECS 云服务器 ECS（Elastic Compute Service）是一种弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
浅色夏墨
目录
相关文章
奔跑的数据
|
8天前
|
数据采集 JSON 数据处理
抓取和分析JSON数据：使用Python构建数据处理管道
在大数据时代，电商网站如亚马逊、京东等成为数据采集的重要来源。本文介绍如何使用Python结合代理IP、多线程等技术，高效、隐秘地抓取并处理电商网站的JSON数据。通过爬虫代理服务，模拟真实用户行为，提升抓取效率和稳定性。示例代码展示了如何抓取亚马逊商品信息并进行解析。
奔跑的数据
19 1
抓取和分析JSON数据：使用Python构建数据处理管道
运营研究坊
|
12天前
|
JSON JavaScript Java
在Java中处理JSON数据：Jackson与Gson库比较
本文介绍了JSON数据交换格式及其在Java中的应用，重点探讨了两个强大的JSON处理库——Jackson和Gson。文章详细讲解了Jackson库的核心功能，包括数据绑定、流式API和树模型，并通过示例演示了如何使用Jackson进行JSON解析和生成。最后，作者分享了一些实用的代码片段和使用技巧，帮助读者更好地理解和应用这些工具。
运营研究坊
30 0
在Java中处理JSON数据：Jackson与Gson库比较
技术交流18179014480
|
15天前
|
JSON API 数据格式
商品详情数据JSON格式示例参考（api接口）
JSON数据格式的商品详情数据通常包含商品的多个层级信息，以下是一个综合多个来源信息的JSON数据格式的商品详情数据示例参考：
技术交流18179014480
55 0
m1a6
|
15天前
|
存储 JSON 前端开发
JSON与现代Web开发：数据交互的最佳选择
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也便于机器解析和生成。它以文本格式存储数据，常用于Web应用中的数据传输，尤其是在客户端和服务器之间。
m1a6
29 0
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
63 1
天玄TX
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
天玄TX
64 0
热烈的马
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery，html，ajax）附源码 超详细
热烈的马
132 0
你挚爱的强哥
|
6月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
你挚爱的强哥
82 0
杨校
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校
43 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
乐多_L
|
3月前
|
XML JSON 前端开发
AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？
AJAX是什么？原生语法格式？jQuery提供分装好的AJAX有什么区别？
乐多_L
31 0

热门文章

最新文章

  • 1
    Jquery读取.Net WebService Json数据
  • 2
    javascript如何解析json对javascript如何解析json对象并动态赋值到select列表象并动态赋值到select列表
  • 3
    C# Json处理日期和Table
  • 4
    在Silverlight中使用Json
  • 5
    iOS5系统API和5个开源库的JSON解析速度测试
  • 6
    HTML，javascript，Json数据在线格式化工具
  • 7
    C++中消息自动派发之一 About JSON
  • 8
    推特开源的Serial，轻量级，快速的json解析框架
  • 9
    Spring MVC各种提交形式以及参数接收（form表单提交以及Json提交）
  • 10
    PHP中Json相关
  • 1
    基于SpringBoot+HTML实现登录注册功能模块
    451
  • 2
    【Java】仓库管理系统 SpringBoot+LayUI+DTree（源码）【独一无二】
    79
  • 3
    SpringBoot集成Redis解决表单重复提交接口幂等（亲测可用）
    479
  • 4
    SpringBoot项目调用HTTP接口5种方式你了解多少？
    528
  • 5
    6个SpringBoot 项目拿来就可以学习项目经验接私活
    87
  • 6
    Springboot启动的时候初始化的线程池默认配置tomcat
    152
  • 7
    SpringBoot+async异步调用接口以及几个任务同时完成和异步接口实现和调用
    129
  • 8
    SpringBoot实现多线程定时任务动态定时任务配置文件配置定时任务
    591
  • 9
    SpringBoot中静态类使用配置文件经常遇到读取为NULL的情况，现在我就告诉大家。
    107
  • 10
    SpringBoot配置图片访问404SpringBoot配置图片访问路径springboot如何访问图片
    61

    • 相关课程

    更多
  • JSON 自学手册图文教程
  • Ajax入门
  • Ajax 前端开发入门与实战
  • SpringBoot快速掌握 - 高级应用
  • Springboot项目云开发快速迁移
  • SpringBoot实战教程

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月