使用ajax在前后端传递数组

我们都知道JSON作为前后端都兼容的数据格式,被很好的用于复杂数据的传输,特别是异步提交当中。当我们要将前端的js数组提交到后端并转化为list,继而又需要将后端的list传到前端转化为js数组的时候,JSON作为中间过渡的格式,必不可少。在此详细总结下。

编程组件 Struts2, FastJson, LigerListBox, AjaxFormSubmit.

第一, 将List数据传递给前端,形成一个JS数组

首先在传到前端的Bean里增加一个menuListJson属性,传递之前把List数据转换为json字符串付给这个属性

String menuJson = JSON.toJSONString(accessProfile.getMenuList());
accessProfile.setMenuListJson(menuJson);

放入requestAttribute,以便前端JSTL能够取得该Bean

ServletActionContext.getRequest().setAttribute("profile", accessProfile);

前端页面进而可以用如下语法来把json转换为js数组

var menuList = JSON.parse(‘${profile.menuListJson}‘);

第二,将JS数组提交到后端,并转化为List对象,此处异步提交表格,使用了JQuery Form Validation插件

首先我们需要在<form></form>包裹中添加一个hidden标签, profile是struts2 action中定义的一个私有实体对象,并匹配有get,set方法,ognl会通过标签的name属性调用set方法将value值付给menuListJson属性。

<input type="hidden" id="menuList" name="profile.menuListJson" value=‘‘/>

Ajax提交部分的代码如下

        $("#form1").validate({
            submitHandler : function(form) {
                $(form).ajaxSubmit({
                    beforeSubmit : showRequest,
                    success : showResponse,
                    url : ‘<c:url value="doModify.action"/>‘,
                    dataType : ‘json‘,
                    type : ‘post‘,
                    timeout : 10000
                });
            }
        });

关键点是对于接收到的json数据(代表着js数组),我们使用fastjson的parse方法转换为list

List<MenuTestBean> menuList=new ArrayList<MenuTestBean>(JSONArray.parseArray(profile.getMenuListJson(),MenuTestBean.class));
profile.setMenuList(menuList);

由此,完成了数组的前后端转换。

时间: 2024-08-29 15:35:26

使用ajax在前后端传递数组的相关文章

spring boot 登录注册 demo (三) -- 前后端传递

前端页面通过thymeleaf渲染 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 前后端的传递关键在html上面,请看代码: <!DOCTYPE html> <html xmlns:th="http://

Jquery Ajax向服务端传递数组参数值

在使用MVC时,向服务器端发送POST请求时有时需要传递数组作为参数值 下面使用例子说明,首先看一下Action [HttpPost] public ActionResult Test(List<string> model) { return Json(null, JsonRequestBehavior.AllowGet); } 方式一,构造表单元素,然后调用serialize()方法得到构造参数字符串 @{ Layout = null; } <!DOCTYPE html> <

编码格式分类: 前后端传递数据的编码格式contentType

urlencoded:form表单和ajax提交数据的默认编码格式 form-data:传文件 application/json:json格式数据 >>> 前后端分离 urlencoded() >>> username=jason&password=123 form-data application/json >>>JsonResponse.string({"name":"jason","pas

Django框架进阶6 多对多三种创建方式, Ajax, Content-Type前后端传输数据编码格式, Ajax发送文件数据, django内置的序列化功能, Ajax结合sweetalert实现删除二次确认, 批量插入数据, 自定义分页器, ajax结合sweetalert实现删除二次确认

多对多三种创建方式 1.全自动(较为常用) class Book(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Author') # orm就会自动帮你创建第三张表 class Author(models.Model): name = models.CharField(max_length=32) ''' 好处:第三张表自己创建 不足之处:第三张表无法扩展额外

ASP.NET使用AJAX完成前后端表单数据交互(包含Vue绑定下拉选项)

毕业工作半年一直在做后端api,最近进入一个新项目同时做前后端,就从基础开始记录总结. 因为项目代码不便上传,以下代码是我将部分内容修改之后的结果,主要记录实现方法,有不当的地方还望大家交流指正~ HTML: <div id="Information"> <div id="SearchBarDiv" v-cloak> <form> <select id="YearSelect" class="f

php中使用ajax进行前后端json数据交互

(最近在学习ajax,所以想自己总结一下在PHP中如何使用ajax技术!) 一.ajax注意点: 1.原理图:(来自韩顺平ajax视频) 2.ajax返回数据类型: 文本,json,xml (1)文本格式: (2)xml: 1 <?php 2 //告诉浏览器返回的是xml类型 3 header("Content-Type:text/xml;charset=utf-8"); 4 5 6 7 8 ?> 前端如何取出: xmlrequest.responseXml();//返回的

2019年6月14日 Web框架之Django_07 进阶操作(MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器)

摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端传输数据编码格式contentType 批量插入数据和自定义分页器 一.MVC与MTV MVC(Model View Controller 模型-视图-控制器)是一种Web架构的模式,所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业务对象与数据库的对象(ORM),视图负责与用户的交互(页面),控制器(C)接受用户的输入调用模型和视图完成用户的请求. M

choices字段、MTV与MVC模型、AJAX、contentType前后端传输数据编码格式、序列化组件、AJAX+sweetalert使用

目录 choices字段.MTV与MVC模型.AJAX.序列化组件.AJAX+sweetalert使用 choices字段 MTV与MVC模型 ajax 特点: ajax传json格式数据 ajax传文件 ajax传文件需要注意的事项 contentType前后端传输数据编码格式 ajax + sweetalert的使用 序列化组件 choices字段.MTV与MVC模型.AJAX.序列化组件.AJAX+sweetalert使用 choices字段 主要运用在用一些特殊字符或数字代表繁琐的字符串

ajax的data传递数组时,前台不报错,后台不进断点

ajax的data中传递数组数据时,需加traditional:true, //默认false 不添加会导致后台接收不到改参数,后台controller中的方法不会执行,前后台都没有报错 $.ajax({ type:'post', async:false, url:'/emergencyPlanDigital/addPointAssociation', data:{ superId:$('#pointId').val(), childrenIds:childrenIds }, dataType: