2011-03-13 3 views
0

У меня есть jquery, генерирующий элемент списка с несколькими полями ввода, когда кто-то нажимает на определенную ссылку. Ссылка выглядит следующим образом:Передача массива через jquery ajax

<a href="#" id="add_sublink" data-sublink_count = "0">Click Here to add more sub links</a> 

JQuery выглядит следующим образом

$('#add_sublink').live("click", function(){ 

    var count = $(this).attr('data-sublink_count'); 
    var form = "<li>Link Name:<br />" + 
      "<input type='text' size = '40' id='sublinkname' name='sub_link_name_" + count + "' value=''/><br />" + 
      "Link URL:<br />" + 
      "<input type='text' size = '40' id='sublinkurl' name='sub_link_url_" + count + "' value=''/>" +    
      "</li>"; 


     $('#sublink_list').append(form); 
     var newcount = (Number(count) + Number(1)); 
     $(this).attr('data-sublink_count', newcount) 

    return false;      

}); 

Это HTML, который он генерирует

<li>Link Name:<br> 
<input type="text" value="" name="sub_link_name_0" id="sublinkname" size="40"><br> 
Link URL:<br> 
<input type="text" value="" name="sub_link_url_0" id="sublinkurl" size="40"><br> 
</li> 

Каждый раз, когда они нажмите на ссылку новый пункт списка добавлен. Я также подсчитываю их и помещаю счет на имя, чтобы каждый элемент ввода был уникальным.

У меня может быть 1 или больше элементов списка с входными значениями в них. Когда нажата кнопка отправки, я собираю информацию с помощью jquery и пытаюсь отправить информацию через ajax.

$('.save_link').live('click', function() { 
    var linkID = $(this).attr('data-link_id'); 

     $('#sublink_list').children().each(function(index) { 
      var this_sublink_name = $(this).find('#sublinkname').val(); 
      var this_sublinkurl = $(this).find('#sublinkurl').val();   

      sub_array[index]['name'] = this_sublink_name; 
      sub_array[index]['url'] = this_sublinkurl;       

      var index = (Number(index) + Number(1)); 

     }); 

     //send the info 
     $.ajax({ 
      url: 'update_link.php', 

      data: jQuery.extend(
       {linkID: linkID},           
       {sub_array: sub_array}),   
      type: 'POST',  
      success: function(results) {   
       if (results == "error"){ 
        //then display an error              
       }else{       
        //display success              
       }           
      } 
     }); 


return false; 
}); 

Все работает отлично, но Аякс не посылает массив sub_array правильно.

Я прочитал другие места, которые предлагают отправку массива как этого

{'sub_array[index][name]': 'value'} //value would be replaced with the actual value 

Но так как элементы списка являются динамическими, я не знаю, сколько там будет, и я не знаю значение.

Я также пытался передавать данные, как это:

data: 'linkID=' + linkID +           
     '&sub_array=' + sub_array, 

Но это тоже не работает.

В этом случае, как лучше всего отправить многомерный массив с неизвестным количеством элементов массива и неизвестными значениями?

ответ

0

Отправить подмассив, как JSON строки в интерфейсе, и расшифровать его там как массив, попробовать любой JSON библиотеку JavaScript, http://www.json.org/

Другой связанный с этим вопрос:

Why doesn't jquery turn my array into a json string before sending to asp.net web method?

+0

Как бы преобразовать его в JSON? – Jason

+0

Вы можете использовать библиотеку JSON здесь: http://www.json.org/js.html – DhruvPathak

+0

и вот пример php, чтобы преобразовать его обратно в массив/объект http://php.net/manual/en/function. json-decode.php, вы можете декодировать его на аналогичных строках в любом бэкэнд, который у вас есть – DhruvPathak

0

Я обычно использую jQuery plugin AjaxForm, который автоматически отправляет все данные в форме в «конечную точку» ajax. Для этого вам нужно всего лишь сделать что-то вроде:

$('#yourForm').ajaxForm(); 

Что может быть настроено под ваши нужды, конечно.

Смежные вопросы