为什么 jQuery 不能在 ajax 发布之前更新数组数据？

Question

我正在尝试创建一个数组并获取表单提交的所有值并将它们放入该数组中。我需要这样做，因为在此代码的 .each 函数期间，我必须对每个客户端的所有值进行额外的加密。这是一个包含数百个正在变化的字段的表单。所以它必须是一个数组才能工作。我尝试在 jQuery 中执行以下操作和其他几种类似的类型，但没有骰子。任何人都可以帮忙吗？谢谢。

编辑：发布我的工作解决方案。谢谢您的帮助。 编辑 2：接受 sabithpocker 的回答，因为它允许我保留我的键名。

Answer 1

var inputArray = {};

//jQuery(this).serializeArray() = [{name: "field1", value:"val1"}, {name:field2...}...]

jQuery(this).serializeArray().each(function(index, value) {
    inputArray[value.name] = encrypt(value.value);
});

//now inputArray = [{name: "field1", value:"ENCRYPTED_val1"}, {name:field2...}...]

//now to form the POST message
postMessages = [];
$(inputArray).each(function(i,v){
    postMessages.push(v.name + "=" + v.value);
});
postMessage = postMessages.join('&');

查看serializeArray() 以查看 JSON 数组格式。

http://jsfiddle.net/kv9U3/

很明显，问题在于您的情况下的this 不是您想象的数组。请澄清this 指针所指的内容，或者只是通过console.log(this) 验证自己

当您更新答案时，在您的情况下，this 指针指的是您提交的表单，您想如何迭代表单？你想用每个来实现什么？

更新

大写而不是加密

http://jsfiddle.net/kv9U3/6/

$('#x').submit(function (e) {
    e.preventDefault();
    var inputArray = [];
    console.log(jQuery(this).serializeArray());
    jQuery(jQuery(this).serializeArray()).each(function (index, value) {
        item = {};
        item[value.name] = value.value.toUpperCase();
        inputArray[index] = item;
    });
    console.log(inputArray);
    postMessages = [];
    $(inputArray).each(function (i, v) {
        for(var k in v)
            postMessages[i] = k + "=" + v[k];
        console.log(i, v);
    });
    postMessage = postMessages.join('&');

    console.log(postMessage);
    return false;
});

Answer 2

问题是#cja_form 不会使用each 列出其字段。您可以改用serialize()：

inputArray = jQuery(this).serialize();

再版，如果你需要编辑每个元素，你可以使用这个：

var input = {};

$(this).find('input, select, textarea').each(function(){
    var element = $(this);
    input[element.attr('name')] = element.val();
});

完整代码

jQuery(document).ready(function($){ 
    $("#cja_form").submit(function(event){
        $("#submitapp").attr("disabled","disabled");
        $("#cja_status").html('<div class="cja_pending">Please wait while we process your application.</div>');

        var input = {};

        $(this).find('input, select, textarea').each(function(){
            var element = $(this);
            input[element.attr('name')] = element.val();
        });

        $.post('../wp-content/plugins/coffey-jobapp/processes/public-form.php', input)
        .success(function(result){
            if (result.indexOf("success") === -1) {
                $("#submitapp").removeAttr('disabled');
                $("#cja_status").html('<div class="cja_fail">'+result+'</div>');
            }
            else {
                page = document.URL;

                if (page.indexOf('?') === -1) {
                    window.location = page + '?action=success';
                }
                else { 
                    window.location = page + '&action=success';
                }
            }
        })
        .error(function(){
            $("#submitapp").removeAttr('disabled');
            $("#cja_status").html('<div class="cja_fail"><strong>Failed to submit article! Check your internet connection.</strong></div>');
        });

        event.preventDefault(); 
        event.returnValue = false;

        return false;
    });
});

---

原答案：

javascript中没有关联数组，你需要一个哈希/对象：

var input = {};

jQuery(this).each(function(k, v){
    input[k] = v;
});

Answer 3

这是我的工作解决方案。在此示例中，它将 cat 添加到所有条目，然后将其作为数组发送到 PHP 页面。从那里我通过 $_POST['data'] 访问我的数组。我在http://blog.johnryding.com/post/1548511993/how-to-submit-javascript-arrays-through-jquery-ajax-call找到了这个解决方案

jQuery(document).ready(function () { 
    jQuery("#cja_form").submit(function(event){
        jQuery("#submitapp").attr("disabled","disabled");
        jQuery("#cja_status").html('<div class="cja_pending">Please wait while we process your application.</div>');
        var data = [];
        jQuery.each(jQuery(this).serializeArray(), function(index, value) {
            data[index] = value.value + "cat";
        });
            jQuery.post('../wp-content/plugins/coffey-jobapp/processes/public-form.php', {'data[]': data})
            .success(function(result){
                if (result.indexOf("success") === -1) {
                    jQuery("#submitapp").removeAttr('disabled');
                    jQuery("#cja_status").html('<div class="cja_fail">'+result+'</div>');
                    } else {
                        page = document.URL;
                        if(page.indexOf('?') === -1) {
                            window.location = page+'?action=success';
                    } else { 
                        window.location = page+'&action=success';
                    }
                }
                })
                .error(function(){
                        jQuery("#submitapp").removeAttr('disabled');
                        jQuery("#cja_status").html('<div class="cja_fail"><strong>Failed to submit article! Check your internet connection.</strong></div>');
                });

        event.preventDefault(); 
        event.returnValue = false;

    });
});