Данные Ajax для каждого

Question

Я довольно новичок в javascript, так что я не уверен, как мне это сделать. Но в основном я хочу добавить цикл for в вызове ajax data: вместо того, чтобы перечислять каждый элемент вручную.

jQuery(document).ready(function()
                {
                    var $payment = { 
                        card:   'ajax-card', 
                        month:  'ajax-month', 
                        year:   'ajax-year', 
                        cvv:    'ajax-cvv', 
                        zip:    'ajax-zip', 
                        phone:  'ajax-phone'
                    };

                    jQuery.each( $payment, function($key, $val)
                    {
                        jQuery('.'+$val).attr({ id: $val });
                    });

                    jQuery('#pay-bill form input[type=submit]').click(function()
                    {
                        jQuery.ajax(
                        {
                            type: "POST",
                            url: "<?php echo get_bloginfo('template_directory').'/cnotethegr8/functions/braintree.php'; ?>",
                            dataType: "json",
                            data: 
                            {
                                card:   jQuery('#'+$card+' input').val(),
                                month:  jQuery('#'+$month+' input').val(),
                                year:   jQuery('#'+$year+' input').val(),
                                cvv:    jQuery('#'+$cvv+' input').val(),
                                zip:    jQuery('#'+$zip+' input').val(),
                                phone:  jQuery('#'+$phone+' input').val()
                            },
                            success: function(data)
                            {
                                if (data)
                                {
                                    alert(data.msg);
                                }
                            }
                        });
                        return false;
                    });
                });

Answer 1

Замените код после var $payment = {...} на код ниже. Я настроил цикл, в котором вы назначаете идентификаторы для элементов.

var data = {};
jQuery.each( $payment, function($key, $val)
{
    var $element = jQuery('.'+$val);
    $element.attr({ id: $val }); //<-- This line can be removed, depending on the
                                 // circumstances
    data[$key] = jQuery('input', $element).val();
});
jQuery('#pay-bill form input[type=submit]').click(function(){
    jQuery.ajax(
    {
        type: "POST",
        url: "<?php echo get_bloginfo('template_directory').'/cnotethegr8/functions/braintree.php'; ?>",
        dataType: "json",
        data: data,
        success: function(data)
        {
            if (data)
            {
                alert(data.msg);
            }
        }
    });
    return false;
 });

Answer 2

Если значения, которые вы хотите передать, имеют форму, вы можете использовать $ ('# myForm'). Serialize ()

Answer 3

Создайте переменную перед вызовом $.ajax и создайте цикл для установки значений.

var postData = {};
$.each($payment, function(k, v){
   //postData[k] = $('#'+v+' input').val();
   postData[k] = $('.'+v+' input').val();
});

$.ajax({
   type: 'POST',
   data: postData,
   // ...
});

PS Вам не нужен имеющийся у вас цикл (настройка $('.'+$val).attr({ id: $val });), вы можете простоdo $('.'+v+' input').val(); (внутри цикла).

Answer 4

Если вы хотите, чтобы каждая функция могла выполнять итерации с парами ключ-> значение, извлеките underscore.js: http://documentcloud.github.com/underscore/#each

_.each({key:'value',key2:'value2'},function(value,key){
  // access the key->value during each iteration
});