如何从 javascript 到 ajax 发送和检索数组

Question

I have a 2d array in javascript, which i need to insert database so i need to send it to php via ajax.

I have tried different solutions given on similar issues on stackoverflow, i was able to solve my error through them but can't get proper data on php file.

I have a javascript code in which i have taken an array Arr_Records = []; this array is filled on 'Add' button click from some other array (var_ItemDetails). (This is working good as data is setting perfectly in Arr_Records).

I have another button function OnCheckOutClick defined in javascript from where i need to insert records in Arr_Records to mysql database so i have been trying ajax to send it to insert.php file but unable to receive the data of Arr_Records there successfully.

<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  

?>

I want to have correct array recieve in insertdata.php so i can access all the items i have set from OnAddClick like itemid, item, category etc to insert in mysql.

Answer 1

use jquery for ajax like this:

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

and in your php insert.php

i don't know what data is sending there var_dump $_POST and check the data in my case it would belike this in php

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

Answer 2

The javascript - ajax function needs to send the payload data with a field name that can be captured in PHP ( such as $_POST['payload'] ) and the PHP needs to use filter_input rather than filter_input_array to filter the data - assigning no actual filter is the equivalent of not filtering at all - hence use 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';
        }
    }
?>