广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何使用ajax传递数组及后台接收
  • 577
分享到

如何使用ajax传递数组及后台接收

2024-04-02 19:04:59 577人浏览 八月长安
摘要

这篇文章主要介绍了如何使用ajax传递数组及后台接收,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言我们在使用ajax异步的提交多选框得到

这篇文章主要介绍了如何使用ajax传递数组及后台接收,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

前言

我们在使用ajax异步的提交多选框得到需要操作的对象的id,这时我们可以把每一个id做出一个对象,之后放到一个数组中,再使用JSON.stringify()对这个数组进行json的格式化;在后台中再inputStream中解析出我们的json字符串,之后只用:

new JSONArray()得到json数组,循环解析我们想要的属性:

var countsCheckBox = $("input[type='checkbox']:checked"); 
 var booksid = []; 
 for(var i=0;i<countsCheckBox.length;i++){ 
 //使用[]取得元素是是一个domElement元素,取值需要使用.value, 
 //如果使用countsCheckBox.eq(i) 则是一个Obkject元素,就可以使用val()取值 
 //alert(countsCheckBox[i].value); 
 mysendbook_id = {}; 
 mysendbook_id['book_id'] = countsCheckBox[i].value; 
 booksid[i] = mysendbook_id; 
 } 
 //alert(booksid); 
  var confirmdel= confirm('确认要删除吗?'); 
  if(confirmdel){ 
  //开始请求删除 
   $.ajax({ 
     url:'selectdelbooks', 
     data:JSON.stringify(booksid), 
     type:'post', 
     success:function(res){ 
      alert("删除成功"); 
     location.replace("/TheDemo/books/pageBooksshow"); 
     } 
     }); 
  }

上面的js中我们把每一个选中的id放到一个mysendbook_id的“book_id”的属性中,再把这个对象放到booksid的数组中;到发送异步请求时使用

JSON.stringify(bookid)格式化这个booksid数组,得到一个json的数组。

再看后台我们怎么接收:

一个是做一个类里面有一个list,这个list装的是只有一个属性为bookid的类,再使用注解@RequestBody加到这个形参上。但是这样比较麻烦;

还有一种是从输入流里面获取数据,使用IOUtils.toString 把inputStream转为字符串,再使用new JSONArray(mybooksid);得到这个json数组

从而得到每一个json中的book_id的属性值

<span > </span><span > @RequestMapping("selectdelbooks") 
 public String selectdelbooks(httpservletRequest request) throws Exception { 
  ServletInputStream inputStream = request.getInputStream(); 
  String mybooksid = IOUtils.toString(inputStream); 
  JSONArray jsonarr = new JSONArray(mybooksid); 
  List<String> book_id =new ArrayList<String>(); 
  for (int i=0;i<jsonarr.length();i++){ 
   book_id.add(((JSONObject)jsonarr.get(i)).getString("book_id")); 
  }...</span>

这样我们得到一个list,里面有我们选中的id值。

数据库中信息:

如何使用ajax传递数组及后台接收

页面的多选:

如何使用ajax传递数组及后台接收

后台得到的选择的book的id:

如何使用ajax传递数组及后台接收

这样拿到id的集合,那后面的操作就方便了。

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用ajax传递数组及后台接收”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网VUE频道,更多相关知识等着你来学习!

--结束END--

本文标题: 如何使用ajax传递数组及后台接收

本文链接: https://www.lsjlt.com/news/69613.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用ajax传递数组及后台接收
    这篇文章主要介绍了如何使用ajax传递数组及后台接收,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言我们在使用ajax异步的提交多选框得到...
    99+
    2022-10-19
  • jquery的ajax如何向后台传递数组
    jQuery是一款流行的前端JavaScript框架,它提供了丰富的功能和组件,其中之一就是Ajax。在Ajax中,我们经常需要向后台传递数据,无论是单个值还是多个值。本文将介绍如何使用jQuery的Ajax向后台传递数组。序列化数组在传递...
    99+
    2023-05-18
  • jquery中怎么使用ajax向后台传递数组参数
    这篇文章给大家介绍jquery中怎么使用ajax向后台传递数组参数,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。需求: 在JS中向后台传递数组参数 分析: JS中的数组是弱类型的可以放...
    99+
    2022-10-19
  • Ajax如何传输Jsond Mvc到后台接收
    Ajax如何传输Jsond Mvc到后台接收,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 代码如下://后台 [HttpPos...
    99+
    2022-10-19
  • 使用postman传递list集合后台springmvc接收
    目录postman传递list集合后台springmvc接收postman 设置springmvc配置错误写法1错误写法2正确写法1正确写法2错误写法1解析 :正确写法1解析 :错误...
    99+
    2022-11-12
  • 使用ajax怎么从JSP传递对象数组到后台
    本篇文章为大家展示了使用ajax怎么从JSP传递对象数组到后台,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JSP:function addAccount(){debugger;var&n...
    99+
    2023-06-08
  • Ajax中如何通过response在后台传递数据
    这篇文章主要为大家展示了“Ajax中如何通过response在后台传递数据”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax中如何通过response在后台...
    99+
    2022-10-19
  • ajax如何提交数据到后台php接收
    这篇文章主要介绍了ajax如何提交数据到后台php接收,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在网上看了很久,发现数据的利用ajax提...
    99+
    2022-10-19
  • 如何使用ajax接收后台发送过来的json数据
    如何使用ajax接收后台发送过来的json数据?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。后台代码package com.sidan.outjson; ...
    99+
    2023-06-08
  • 如何解决jQuery.ajax向后台传递数组的问题
    小编给大家分享一下如何解决jQuery.ajax向后台传递数组的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!jQuery....
    99+
    2022-10-19
  • Vue中data传递函数、props接收函数及slot传参的使用及说明
    目录1. data作为转换层2. props接收传递过来的函数并把处理结果传回父组件3. 父组件接收子组件传递回来的值1. data作为转换层 1.1 如下图中的代码,data作为转...
    99+
    2022-11-13
    Vue中data传递函数 Vue中props接收函数 Vue中slot传参
  • springcloud如何使用Feign后台内部传递MultipartFile
    目录如何使用Feign后台内部传递MultipartFile先修改FeignClient接口内部调用注意点Feign进行跨服务传递MultipartFile文件通过feign进行跨服...
    99+
    2022-11-13
  • js如何使用ajax传值给后台以及后台返回字符串进行处理
    这篇文章主要为大家展示了“js如何使用ajax传值给后台以及后台返回字符串进行处理”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“js如何使用ajax传值给后台以...
    99+
    2022-10-19
  • springMvc前端如何使用json的方式向后台传递对象数组方法
    这篇文章主要介绍了springMvc前端如何使用json的方式向后台传递对象数组方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如下所示:...
    99+
    2022-10-19
  • SpringMVC参数的传递之如何接收List数组类型的数据
    目录前言在了解下面参数如何传递前先记住两个结论1.前台发送String和基本类型数组前台数据的发送(发送json对象(或js对象)后台接收数据2.前台发送String类型和对象数组一...
    99+
    2022-11-13
    SpringMVC参数传递 接收数组 List数组类型数据
  • vue如何实现跨页面传递与接收数组并赋值
    目录跨页面传递与接收数组并赋值1.界面A:question-edit2.界面B:add-question数组赋值踩过的坑跨页面传递与接收数组并赋值 为更好让大家理解拿自己的项目做例...
    99+
    2022-11-13
  • Vue中传递自定义参数到后端、后端获取数据并使用Map接收参数
    目录1、未进行二次封装之前的操作1.1 前端调用接口设计1.2 后端接口设计2、使用二次封装axios后的设计2.1 封装的接口类型(只展示关键的接口调用部分)2.2 前端调用接口设...
    99+
    2022-11-13
  • 如何在ASP中使用数组打包接口传递数据?
    ASP是一种非常流行的Web开发语言,常用于开发企业级Web应用程序。在Web应用程序中,与其他系统进行数据交互是非常常见的需求。而使用数组打包接口传递数据是一种非常高效和可靠的方式。在本文中,我们将介绍如何在ASP中使用数组打包接口传递数...
    99+
    2023-07-31
    数组 打包 接口
  • 如何使用Ajax实现表单提交及后台处理
    这篇文章主要为大家展示了“如何使用Ajax实现表单提交及后台处理”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用Ajax实现表单提交及后台处理”这篇文章吧...
    99+
    2022-10-19
  • 你知道如何在ASP中使用数组传递给接口吗?
    ASP是一种强大的服务器端脚本语言,用于创建动态网站。它支持多种数据类型,包括数组。在ASP中,使用数组可以更有效地处理数据。本文将介绍如何在ASP中使用数组传递给接口。 在ASP中,可以使用数组来存储和操作数据。数组是一种特殊的变量,可以...
    99+
    2023-07-31
    数组 打包 接口
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作