【问题标题】:Add Javascript array to form input添加 Javascript 数组以形成输入
【发布时间】:2015-08-19 13:35:16
【问题描述】:

我正在使用 VueJS 和 jQuery 作为前端,Laravel 5 作为后端构建一个群发邮件系统。

我正在使用 AJAX 调用来检索基于组、机构或所有活动用户的用户列表。然后,用户可以根据 DOM 中的这些结果删除地址(VueJS data)并手动添加新地址。

表单包含一个文件,因此我不能(或不希望,基于兼容性问题)使用 AJAX 调用发送表单数据。问题是我需要在用户提交表单时将电子邮件地址列表连同表单一起发送。

这里是 Javascript。最相关的部分是 serializeRecipients 方法,我将每个电子邮件地址附加到隐藏的表单字段:

var vm = new Vue({
    el: '#emailContainer',
    data: {
        recipients: [
            {
               name: "Joe Smith",
               email: "joe@demo.com"
            }
        ],
        individualRecipients: [],
        manualRecipient: null,
        validation: {
            email: true
        }
    },

    methods: {
        //
        serializeRecipients: function() {
            var recipientAddresses = [];
            var individualRecipientAddresses = [];
            $.each(this.recipients, function (k, recipient) {
                recipientAddresses.push(recipient['email']);
            });
            $.each(this.individualRecipients, function(k, recipient) {
                individualRecipientAddresses.push(recipient);
            });

            $("#recipientsInput").val(recipientAddresses);
            $("#individualRecipientsInput").val(individualRecipientAddresses);
        }
    }
});

在表单元素上我使用v-on="submit: serializeRecipients"。这会生成以下表单输出:someone@demo.com, someoneelse@demo.com,然后我使用 PHP 的 explode() 函数将其转换为数组。

这一切都有效,但我想知道是否有更好的方法来实现这一点。任何建议将不胜感激!

【问题讨论】:

    标签: javascript jquery vue.js


    【解决方案1】:

    你可以把数组加入一个字符串,然后在服务器上解析它。

    $("#recipientsInput").val(recipientAddresses.join(','));
    $("#individualRecipientsInput").val(individualRecipientAddresses.join(','));
    

    所以:

    ['me@somewhere.com', 'you@somewhereelse.com', 'him@somewhere.com']
    

    会变成:

    'me@somewhere.com,you@somewhereelse.com,him@somewhere.com'
    

    然后在服务器上,您可以用逗号分隔该字段。

    【讨论】:

    • 我已经用我目前拥有的代码获得了一个逗号分隔值。 recipientAddresses 数组由对象组成,所以我需要 email 属性。但是,individualRecipientAddresses 只是一个普通数组,所以我喜欢你的建议 - 更少的代码。
    • 明白了,抱歉。我一定已经浏览了你问题的最后一段。我认为你在做的是非常标准的。我不确定是否有更好的方法。
    • 很抱歉,应该向该数组添加一个对象以使其更清晰(已编辑)。这可能有大约一百个(或更多)收件人,认为这种方法仍然可以吗?不能用AJAX实在想不出其他的办法..
    • 是的,我的意思是,如果您不能使用 AJAX 或通过 websocket 发布到服务器,那么它必须以某种方式弥补它吗?我能想到的唯一另一种方法是为每个地址动态添加输入元素到您的表单中,但这将是更多代码,甚至可能性能更低。所以,是的,我认为单个字段中的几百个地址不会受到伤害。见鬼,ASP.NET Web 窗体使用隐藏的表单字段来跟踪视图状态,而且当你在其中一些网站上查看源代码时,这个傻瓜变得如此之大,以至于 Chrome 滞后:P
    • @NightMICU,完全理解这个答案是否最终成为您的解决方案,但如果是,请不要忘记接受它;)
    猜你喜欢
    • 1970-01-01
    • 2013-01-29
    • 2015-03-25
    • 1970-01-01
    • 1970-01-01
    • 2012-10-09
    • 2018-07-05
    • 1970-01-01
    相关资源
    最近更新 更多