如何使用jQuery接收前端传入List对象
沉沙 2018-09-20 来源 : 阅读 4382 评论 0

摘要:本篇教程介绍了如何使用jQuery接收前端传入List对象,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

本篇教程介绍了如何使用jQuery接收前端传入List对象,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

<

前端代码:

<form id="person_add" method="post" action="user">
    <table class="table_add">
        <tr>
            <td>
            </td>
            <td>name:</td>
            <td><input name="name" value=""/></td>
            <td>address</td>
            <td><input name="address" value=""/></td>
        </tr>
        <tr>
            <td></td>
            <td>name:</td>
            <td><input name="name" value=""/></td>
            <td>address</td>
            <td><input name="address" value=""/></td>
        </tr>
        <tr>
            <td></td>
            <td>name:</td>
            <td><input name="name" value=""/></td>
            <td>address</td>
            <td><input name="address" value=""/></td>
        </tr>
        <tr>
            <td></td>
            <td>name:</td>
            <td><input name="name" value=""/></td>
            <td>address</td>
            <td><input name="address" value=""/></td>
        </tr>
        <tr align="center">
            <td colspan="5">
                <a id="menu_submit" href="javascript:onSubmit()">提交</a>
                <a id="menu_no" href="javascript:closeDialog()">关闭</a>
            </td>
        </tr>
    </table>
</form>

 
Controller代码:
 

    @PutMapping
    public void addUser(@RequestBody List<Person> persons){
        System.out.println(persons.toString());
    }

 
 
如果后台使用Controller这样接收参数,那么必须传递进来参数如下格式:
[{"name":"1","address":"a1"},{"name":"2","address":"b1"},{"name":"3","address":"c1"},{"name":"4","address":"d1"}]
 
首先对表单进行序列化,

 $.serializeObject = function (form) {
        var o = {};
        $.each(form.serializeArray(), function (index) {
            if (o[this[‘name‘]]) {
                if ($.isArray(o[this[‘name‘]])) {
                    o[this[‘name‘]].push(this[‘value‘]);
                } else {
                    o[this[‘name‘]] = [o[this[‘name‘]], this[‘value‘]];
                }
            } else {
                o[this[‘name‘]] = this[‘value‘];
            }
        });
        return o;
    };

 
序列化之后的表单是一个对象,通过调用,得到一个对象

var serializeArray = $.serializeObject($("#person_add"));

 

 
将对象分解成为我们需要的json字符串,JSON.stringify() 将对象转为字符串

 // 计算json内部的数组最大长度,必须要有这一步
        for (var item in serializeArray) {
            var tmp = $.isArray(serializeArray[item]) ? serializeArray[item].length : 1;
            vCount = (tmp > vCount) ? tmp : vCount;
        }

        if (vCount > 1) {
            var jsonData2 = new Array();
            for (var i = 0; i < vCount; i++) {
                var jsonObj = {};
                for (var item in serializeArray) {
                    jsonObj[item] = serializeArray[item][i];
                }
                jsonData2.push(jsonObj);
            }
            jsonParams=JSON.stringify(jsonData2);
        } else {
             jsonParams=JSON.stringify(serializeArray);
        };
        console.info(jsonParams);

 
 
得到的jsonParams就是我们需要的json字符串

通过ajax直接上传即可:

 $.ajax({
            url: "user",
            method: "PUT",
            contentType: "application/json; charset=utf-8",
            data: jsonParams,
            success: function (res) {
                alert(res);
            }
        })

   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程