как передать массив через AJAX?

531

31 мая 2017, 04:53

Ситуация такая, добавляю записи в БД с перезагрузкой, решил реализовать на AJAX, но тут ситуация такая что тут мне нужно передать массив.

Вот что было с перезагрузкой

if ($_POST["save_submit_opis"]){
    function createQuer($i, $e){
        $query = "INSERT INTO opisanie (id,text) VALUES";
        $limita = count($e);
        $solis = "ON DUPLICATE KEY UPDATE  
                     text = VALUES(text) 
                 ";
        for($is=0; $is<$limita; $is++){
            $query .= "('{$i}','{$e[$is]}')".($is!=$limita-1?',':'');
        }
        $res = mysql_query($query.$solis);
    }
    $xId =  $_POST['id'];
    $xOpis = $_POST['text'];
    $query = createQuer($xId, $xOpis);
}
<form>
<div>
    <input name="id[]" type="text" value="1"/>
    <input name="opis[]" type="text" value="123"/>
</div>
<div>
    <input name="id[]" type="text" value="2"/>
    <input name="opis[]" type="text" value="456"/>
</div>
<div>
    <input name="id[]" type="text" value=""/>
    <input name="opis[]" type="text" value="789"/>
</div>
<input type="submit" name="save_submit_opis" value="Сохранить изменения" />

А вот примерная реализация на ajax

$(document).on('click', '#save_submit_opis', function(){
    var id = $("#..").val();
    var opis = $("#..").val();
        $.ajax({
            type: "POST",
            url: "https://xxx.xx/xx/xx.php",
            data: "id="+id+"&opis="+opis,
            dataType: "html",
            cache: false,
            success: function(data){ 
            }   
        }); 
});

Обычно раньше получал value простым указанием id элемента, но тут дело в том что у всех class и id одинаковые и неизвестно точное количество строк. С обычно перезагрузкой все было просто нужно было указать в name [], тогда он просто собирал все значения в массив а там уже добавлял в БД и тд, не столь важно. Сейчас мне интересно как все это можно реализовать на AJAX, передать взять все в массив передать все через AJAX Может кто-то сталкивался с таким и может что-нибудь подсказать

Answer 1

Раз ты используешь jQuery, то можно воспользоваться serialize формы. Serialize возвращает строку пригодную для передачи через URL строку. Данные могут собираться с многих объектов jQuery, включая <input>, <textarea>, <select> и пр.

$(document).on('click', '#save_submit_opis', function(e) { 
  e.preventDefault(); 
 
  var form = $('form'); 
  $.ajax({ 
    type: "POST", 
    url: "YOUR_URL", 
    data: form.serialize(), 
    dataType: "html", 
    cache: false, 
    success: function(data) { 
      console.log(data); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
  <div> 
    <input name="id[]" type="text" value="1" /> 
    <input name="opis[]" type="text" value="123" /> 
  </div> 
  <div> 
    <input name="id[]" type="text" value="2" /> 
    <input name="opis[]" type="text" value="456" /> 
  </div> 
  <div> 
    <input name="id[]" type="text" value="" /> 
    <input name="opis[]" type="text" value="789" /> 
  </div> 
  <input type="submit" name="save_submit_opis" value="Сохранить изменения" id="save_submit_opis" />

На сервер придет массив вида:

Array
(
    [id] => Array
        (
            [0] => 1
            [1] => 2
            [2] => 123
        )
    [opis] => Array
        (
            [0] => 123
            [1] => 456
            [2] => 789
        )
)

Кстати замечу, что у тебя написано on('click', '#save_submit_opis', хотя идентификатора у кнопки не было проставлено.. Либо поставь, либо пиши правильный селектор.

А также, раз ты вешаешь клик на кнопку с типом submit (что бессмысленно, раз ты отправляешь запрос ajax), то нужно предотвратить стандартное поведение при нажатии на такую кнопку за счет e.preventDefault();

Answer 2

В вашем случае можно поступить следующим образом:

HTML:

<form id="my-form">
<div>
    <input name="id[]" type="text" value="1"/>
    <input name="opis[]" type="text" value="123"/>
</div>
<div>
    <input name="id[]" type="text" value="2"/>
    <input name="opis[]" type="text" value="456"/>
</div>
<div>
    <input name="id[]" type="text" value=""/>
    <input name="opis[]" type="text" value="789"/>
</div>
<input type="submit" value="Сохранить изменения" />
</form>

JS:

$('#my-form').submit(function() {   
    $.ajax({
        type: "POST",
        url: "https://xxx.xx/xx/xx.php",
        data: $('#my-form').serialize(),
        dataType: "html",
        cache: false,
        success: function(data){ 
        }   
    });
});

Answer 3

Указывай объект данных в таком формате, массивы предварительно создай.

data: {id: [], opis: []}

by default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". https://api.jquery.com/jquery.ajax/