前台增行删行,多个相同对象,ajax提交_ajax获取多个相同的对象-优快云博客

本文链接：https://blog.youkuaiyun.com/sdzhangshulong/article/details/79246256

本文介绍了一种将HTML表单数据序列化为JSON对象的方法，并通过Ajax将其提交到后端的过程。包括如何处理单个对象及多个相同类型的对象，并展示了具体的前端实现代码和后端Controller接收数据的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先前台代码

页面结构

<form>
<table>....User对象...</table>

<table>

<tr>role对象</tr>

</table>

</form>

要将这些数据一次性发送给后台

两个工具方法

/**
 * 将json数组转为json对象
 * @param data
 * @returns {{}}
 */
function serializeObject(data){

    //输出以数组形式序列化表单值
    //var data = $('#form').serializeArray();
    var obj = {};
    $.each(data,function(i,v){
        obj[v.name] = v.value;
    })
    return obj;
}

/**
 * 将table中多个相同对象处理为json对象数组
 * @param object
 * @param $object
 * @returns {Array}
 */
function constructObjectFromTable(object, $object) {
    var javaObjArray = [];

    $object.each(function (i) {
        var javaObj = {};

        for (var p in object) {
            var $val = $(this).find('input[name="' + p + '"]');
            if ($val.length === 0) {
                javaObj[p] = $(this).find('select[name="' + p + '"]').val();
            } else {
                javaObj[p] = $val.val();
            }
        }

        javaObjArray.push(javaObj);
    });

    return javaObjArray;
}

然后是提交

//保存新增用户
function save() {
    //验证必填项
    var flag = false;
    $("input[required='required']").each(function () {
        if ($(this).val() == '') {
            layer.alert("有必填项为空");
            $(this).focus();

            flag = true;
            return;//跳出循环
        }
    });
    if (flag) {
        return;
    }
    var userRole = {};//后台中,此对象有两个属性,一个是User user,;一个是List<Role> roles;
    var user = serializeObject($("#addForm").serializeArray());//显得到user
    userRole.user=user;
    var role = {roleName:'',roleCode:''};//字段要和后台对象对应
    var roles = constructObjectFromTable(role,$('#tblistAdd .bodyTr'));//再得到roles;
    userRole.roles = roles;
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: '/user/save',
        contentType: "application/json; charset=utf-8",
        /*contentType:'application/json,charset=utf-8"',*/
        data: JSON.stringify(userRole),
        success: function (data) {
            if (data.isSuccess) {
                //window.parent.location.reload(); //刷新父页面
                layer.alert("保存成功");
                parent.location.href = parent.location.href;
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            } else {
                layer.alert(data.msg)
            }
        },
        error: function () {
            layer.alert("请求错误");
        }
    })
}

然后后台实体类

@Data
public class UserRole extends BaseModel {
    private User user;
    private List<Role> roles;
}

控制层Controller

@RequestMapping("/save")
@ResponseBody
public ResponseEntity add (HttpServletRequest request, @RequestBody UserRole userRole){
    try {
        //userService.save(userRole.getUser());
        User user = userRole.getUser();
        List<Role> roles = userRole.getRoles();
    } catch (Exception e) {
        logger.error("e",e);
        return ResponseEntity.fail("500","保存失败");
    }

    return ResponseEntity.ok("");
}

ok了!!!!