【前台 ajax】web项目前台传递数组给后台 两种方式

简介: 项目使用maven    springMVC   有需求 将前台的数组   在ajax中 送给后台方式1:前台代码:【注意:ajax中的属性---traditional:true,  】    如果Post是string数组或者int数组,则ajax中traditional: true, ...

项目使用maven    springMVC   

有需求 将前台的数组   在ajax中 送给后台

方式1:

前台代码:【注意:ajax中的属性---traditional:true,  】

    如果Post是string数组或者int数组,则ajax中traditional: true,

    如果Post是对象数组,则ajax中traditional: false,否则对象将为空

 1 //首先 是数组数据的封装
 2 $.each(checkedNodes,function(i,node){
 3                     nodeArr.push(node.id);
 4                 });
 5 //ajax中  需要设置 traditional:true,
 6                 if(roleName !="" ){
 7                     $.ajax({url:"roleAdd.htmls",
 8                             dataType:'json',
 9                             type:"post",
10                             traditional:true,
11                             data:{
12                                 "roleName" : roleName,
13                                 "roleCre" : roleCre,
14                                 "nodeArr" : nodeArr,
15                             },
16                             success:function(data){
17                                 if(data != null){
18                                     parent.page.pageSet(); 
19                                 }    
20                                 parent.layer.close(parent.indexRoleAdd); //获取到layer的弹出窗 关闭它  indexRoleAdd
21                     }});
22                 }
View Code

后台代码:【使用String[] nodeArr数组接收即可】

 1 @RequestMapping("/roleAdd")
 2     @ResponseBody
 3     public Role roleAdd(String roleName,String roleCre,HttpServletRequest request, String[] nodeArr){
 4         
 5         Role role = new Role();
 6         role.setRoleId(UUID.randomUUID().toString());
 7         role.setRoleName(roleName);
 8         role.setRoleCre(roleCre);
 9         //创建信息
10         HttpSession session = request.getSession();
11         User user = (User) session.getAttribute("user");
12         role.setTransPerson(user.getUserId());
13         role.setCreateDate(new Timestamp(System.currentTimeMillis()));
14 //        roleService.save(role);
15 //        roleService.flush();
16         return role;
17     }
View Code

 

 

 

 

 

方式2:

前台代码:

 1 $.each(checkedNodes,function(i,node){
 2                     nodeArr.push(node.id);
 3                 });
 4 //数组数据 封装完成后转化为JSON字符串
 5                 var nodes = JSON.stringify(nodeArr);
 6                 
 7                 if(roleName !="" ){
 8                     $.ajax({url:"roleAdd.htmls",
 9                             dataType:'json',
10                             type:"post",
11                             data:{
12                                 "roleName" : roleName,
13                                 "roleCre" : roleCre,
14                                 "nodeArr" : nodes,
15                             },
16                             success:function(data){
17                                 if(data != null){
18                                     parent.page.pageSet(); 
19                                 }    
20                                 parent.layer.close(parent.indexRoleAdd); //获取到layer的弹出窗 关闭它  indexRoleAdd
21                     }});
22                 }
View Code

后台代码:【String nodeArr接收数据即可】

 1     /**
 2      * 进行添加角色的操作
 3      * @return
 4      */
 5     @RequestMapping("/roleAdd")
 6     @ResponseBody
 7     public Role roleAdd(String roleName,String roleCre,HttpServletRequest request, String nodeArr){
 8         
 9         Role role = new Role();
10         role.setRoleId(UUID.randomUUID().toString());
11         role.setRoleName(roleName);
12         role.setRoleCre(roleCre);
13         //创建信息
14         HttpSession session = request.getSession();
15         User user = (User) session.getAttribute("user");
16         role.setTransPerson(user.getUserId());
17         role.setCreateDate(new Timestamp(System.currentTimeMillis()));
18 //        roleService.save(role);
19 //        roleService.flush();
20         return role;
21     }
View Code

只不过 这样接收到的数组是字符串形式的  需要自己在后台进行二次处理 才能拿到 数组内的数据

 

 

 

 

 

这两种方式都可以 实现!!!!!

相关文章
|
12月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
276 3
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
268 1
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
172 2
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
159 3
|
前端开发 API 数据格式
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
在Web开发领域,技术的快速迭代推动着应用不断进化。传统前后端交互方式已无法满足现代Web应用对高效、实时性和用户体验的需求。AJAX作为异步通信的先驱,使页面无需刷新即可更新部分内容,显著提升用户体验;尽管XML曾是其主要数据格式,但如今JSON已成为主流。Fetch API则以其简洁、灵活的特点成为AJAX的现代替代品,基于Promises的异步请求让开发更加高效。与此同时,Python后端凭借高效稳定和丰富的库支持,成为众多开发者的首选,无论是轻量级的Flask还是全功能的Django,都能为Web应用提供强大的支撑。
156 0
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
171 0
|
前端开发 JavaScript API
告别繁琐!AJAX与Fetch API,让你的前后端沟通畅通无阻,项目效率飙升!
在Web开发中,前后端的顺畅沟通至关重要。传统方法常需频繁刷新页面,影响体验与效率。AJAX和Fetch API的出现简化了这一过程。AJAX利用XMLHttpRequest实现局部页面更新,提升用户体验;Fetch API则以更简洁的语法和强大的功能,进一步优化异步请求处理。两者均能显著提高开发效率,简化代码结构,让项目迭代更快速。拥抱这些技术,让Web开发之路更加顺畅。
156 0
|
前端开发 Java UED
告别页面刷新时代:Struts 2 Ajax技术揭秘,轻松实现动态加载,Web应用焕然一新!
【8月更文挑战第31天】在Web应用开发中,用户体验至关重要。为减少页面刷新带来的不适,Ajax技术应运而生。Struts 2作为流行的Java EE框架,通过内置的Ajax支持简化了无刷新页面动态加载的实现。本文通过对比传统请求响应模式,展示了Struts 2如何轻松实现Ajax功能,提升了用户体验和开发效率,并灵活地实现了数据交换。然而,使用Ajax时还需注意SEO和跨域请求等局限性。
131 0
|
开发者 前端开发 Apache
Apache Wicket Ajax揭秘:轻松几步,让你的Web应用告别“呆板”,焕发新生!
【8月更文挑战第31天】随着互联网技术的发展,Web应用的交互性成为评价网站成功的关键指标。Apache Wicket作为一款卓越的Java Web框架,不仅具备强大的组件化开发能力,还内置了对Ajax技术的支持,使开发者能轻松提升Web应用的交互体验。通过简单的代码示例展示了如何在不刷新页面的情况下异步更新页面元素,极大提升了用户体验。Wicket提供了多种Ajax组件和行为,如AjaxFallbackLink、AjaxButton等,满足不同场景需求,并支持自定义Ajax行为,帮助开发者实现复杂交互效果。合理运用Wicket的Ajax功能,可显著增强网站竞争力。
183 0