Как отправить и получить массив из javascript через ajax

Question

У меня есть 2d массив в javascript, в который мне нужно вставить базу данных, поэтому мне нужно отправить его в php через ajax.

Я пробовал разные решения по схожим проблемам в stackoverflow, я смог решить мою ошибку через них, но не могу получить правильные данные в php-файле.

У меня есть код JavaScript вкоторый я взял массив Arr_Records = [];этот массив заполняется нажатием кнопки «Добавить» из другого массива (var_ItemDetails). (Это работает хорошо, так как данные отлично устанавливаются в Arr_Records).

У меня есть другая функция кнопки OnCheckOutClick, определенная в javascript, откуда мне нужно вставить записи в Arr_Records в базу данных mysql, поэтому я пытаюсь отправить ее с помощью ajaxвставить файл .php, но не смог успешно получить данные Arr_Records там.

<script>
var Arr_Records = [];
var indx = 0;

// This function is setting records in Arr_Records from another array. Its working fine (indx was initialized with 0).
function OnAddItemClick()
{
Arr_Records.push([
    var_ItemDetails.Id, 
    var_ItemDetails.Item, 
    var_ItemDetails.CategoryId, 
    var_ItemDetails.Category, 
    var_ItemDetails.Price, 
    var_ItemDetails.AvbQty,
    var_ItemDetails.PurQty,
    var_ItemDetails.RemQty, 
    var_ItemDetails.TotalPrice
]);


alert(Arr_Records[indx][1]); // only to confirm insertion
indx++; 

OnClearClick(); // to clear input fields.
}

function OnCheckOutClick()
{        
 var ajax = new XMLHttpRequest();
 var method = "POST";
 var url = "insertdata.php";
 var async = true;

 ajax.open(method, url, async);    
 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 ajax.send(JSON.stringify(Arr_Records));
 ajax.onreadystatechange =  function()
 {
    if(this.readyState == 4 && this.status == 200)
    {
        var response_Data = ajax.responseText;
        alert(response_Data);
    }
 }    

}
</script>


// **** insertdata.php ****

<?php

$arrRecords = filter_input_array(INPUT_POST, 'Arr_Records');

$arrRecords = json_decode($arrRecords); 

if ( $arrRecords != null )
 echo $arrRecords[0][1];
else
  echo "No Data Found";   // this line executes  

?>

Я хочу получить правильный массив в insertdata.php, чтобы я мог получить доступ ко всем элементам, которые я установил из OnAddClick, как itemid, предмет, категория и т. д. для вставки в mysql.

Answer 1

Функция javascript - ajax должна отправлять данные полезной нагрузки с именем поля, которое может быть записано в PHP (например, $ _POST ['payload']), и PHP должен использовать filter_input вместо filter_input_array дляфильтровать данные - назначение фактического фильтра не эквивалентно фильтрации вообще, поэтому используйте FILTER_SANITIZE_STRING

<script>

    var Arr_Records = [];
    var indx = 0;

    // This function is setting records in Arr_Records from another array. Its working fine (indx was initialized with 0).
    function OnAddItemClick(){
        Arr_Records.push([
            var_ItemDetails.Id, 
            var_ItemDetails.Item, 
            var_ItemDetails.CategoryId, 
            var_ItemDetails.Category, 
            var_ItemDetails.Price, 
            var_ItemDetails.AvbQty,
            var_ItemDetails.PurQty,
            var_ItemDetails.RemQty, 
            var_ItemDetails.TotalPrice
        ]);
        indx++; 

        OnClearClick();
    }



    function OnCheckOutClick(){
        var payload=JSON.stringify( Arr_Records );
        var ajax = new XMLHttpRequest();
            ajax.onreadystatechange =  function(){
                if( this.readyState == 4 && this.status == 200 ){
                    alert( this.response );
                }
            }
            ajax.open( 'POST', 'insertdata.php', true );
            ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            /* send the data as the value of a named parameter / post field */
            ajax.send( 'payload='+payload );
    }
</script>




<?php

    /* insertdata.php */
    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['payload'] ) {

        $data = filter_input( INPUT_POST, 'payload', FILTER_SANITIZE_STRING );
        $json = json_decode( $data ); 

        if( empty( json_last_error() ) ){
            echo $json[0][1];

        } else {
            echo 'No Data Found';
        }
    }
?>

Answer 2

используйте jquery для ajax следующим образом:

$.ajax({
type: 'POST',
url: 'insert.php',
data: {
   Arr_Records:{
         "id":var_ItemDetails.Id,
         ...
    }
},
success: function(msg){
    alert('data sent' + msg);
}
});'

и в вашем php insert.php

я не знаю, какие данные отправляются туда var_dump $ _POST и проверяю данные вв моем случае это будет так в php

$array_record = $_POST["Arr_Records"];
$id = $array_record['id'];