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

时间:2013-07-14 22:56:44

标签: javascript jquery ajax arrays

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

编辑:发布我的工作解决方案。谢谢您的帮助。 编辑2:接受sabithpocker的回答,因为它允许我保留我的密钥名称。

3 个答案:

答案 0 :(得分:2)

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;
});

答案 1 :(得分:1)

问题是#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;
});

答案 2 :(得分:1)

这是我的工作解决方案。在此示例中,它将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;

    });
});