使用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);

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

 

转载于:https://www.cnblogs.com/sengao/p/5424857.html

使用jQuery Ajax进行前后端交互时,可以通过JSON格式来传递数据。以下是一个示例: 前端代码(HTML和JavaScript): ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button onclick="sendData()">发送数据</button> <script> function sendData() { // 创建要发送的数据对象 var data = { name: "John", age: 30 }; // 发送Ajax请求 $.ajax({ url: "backend.php", // 后端处理请求的URL type: "POST", // 请求类型 data: JSON.stringify(data), // 将数据对象转换为JSON字符串 contentType: "application/json", // 设置请求头的Content-Type success: function(response) { // 请求成功后的处理逻辑 console.log(response); }, error: function(xhr, status, error) { // 请求失败后的处理逻辑 console.log(error); } }); } </script> </body> </html> ``` 后端代码(PHP示例): ```php <?php // 从请求中获取JSON数据 $jsonData = file_get_contents('php://input'); // 解析JSON数据为PHP数组 $data = json_decode($jsonData, true); // 处理数据逻辑 $name = $data['name']; $age = $data['age']; // 构造响应数据 $response = array( 'status' => 'success', 'message' => 'Data received successfully', 'name' => $name, 'age' => $age ); // 将响应数据转换为JSON字符串 $jsonResponse = json_encode($response); // 设置响应头的Content-Type header('Content-Type: application/json'); // 输出响应数据 echo $jsonResponse; ?> ``` 在上述示例中,前端代码中的`sendData()`函数会在按钮点击时被调用。它创建一个包含`name`和`age`属性的JavaScript对象,并将其转换为JSON字符串。然后使用jQuery Ajax发送POST请求到后端的`backend.php`文件。后端代码中,通过`file_get_contents('php://input')`获取请求中的JSON数据,并使用`json_decode()`将其解析为PHP数组。然后可以根据需要处理数据,构造响应数据,并将其转换为JSON字符串。最后通过设置响应头的Content-Type为`application/json`并输出响应数据,完成与前端的交互。 请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值