Send an JS array through Ajax

Question

I've this type of array in JS:

[{
  websitetype: "onepager"
}, {
  layout: "provided"
}, {
  layout_provided: "wireframes"
}, {
  languages: "single"
}, {
  client_name: "dasda"
}, {
  client_email: "[email protected]"
}, {
  client_conditions: "on"
}, {
  client_newsletter: "on"
}]

How can I send it through Ajax ?

What I tried is:

$.ajax({
    type: 'POST',
    url: 'assets/send.php',
    data: {datas},
    success: function(response) { },
});

This is what I would like to get in PHP:

[datas] => Array
    (
        [websitetype] => onepager
        [layout] => provided
        [layout_provided] => wireframes
        [languages] => single
        [client_name] => dasda
        [client_email] => [email protected]
        [client_conditions] => on
        [client_newsletter] => on
    )

What I'm missing here please ?

Thanks.

This entirely depends on what your send.php script expects — Phil
– Phil, Commented Sep 28, 2020 at 1:28
Is datas defined? Does it contain the data you're expecting? In your browser's debugging tools, on the network tab, is the data present on the request? How specifically does this fail? — David
– David, Commented Sep 28, 2020 at 1:32
@Phil, code updated with the desired output in PHP. Actually I have an array in an array. — popol
– popol, Commented Sep 28, 2020 at 1:32
You can not send a whole array like that via ajax. thats what i said in the answer here - use formData object to send all the HTML data whatever you have to make it easy for you. Looking at the questions you are posting they all come to one thing which is sending data to PHP - it can be simplified uisng formData. there is NO point storing data in an ARRAY (unless it being used somewhere else too) and then looping that array to send data in a formData and to send to PHP. hope this makes all sense. :) — Always Helping
– Always Helping, Commented Sep 28, 2020 at 1:34
@AlwaysHelping "You can not send a whole array like that via ajax". Sure you can. That's what the application/json content-type is for — Phil
– Phil, Commented Sep 28, 2020 at 2:05

Phil · Accepted Answer · 2020-09-28 02:27:56Z

The first thing you should do is reduce that array into an object matching the format you want

const dataObject = Object.fromEntries(datas.flatMap(o => Object.entries(o)))

This looks like the following

{
  "websitetype": "onepager",
  "layout": "provided",
  "layout_provided": "wireframes",
  "languages": "single",
  "client_name": "dasda",
  "client_email": "[email protected]",
  "client_conditions": "on",
  "client_newsletter": "on"
}

You then have two options for posting it to PHP

Send it as raw JSON

$.ajax({
  method: "POST",
  url: "assets/send.php",
  contentType: "application/json",
  data: JSON.stringify(dataObject),
  processData: false
})

Then read and parse the JSON in PHP

$datas = json_decode(file_get_contents("php://input"), true);

// example
echo $datas["websitetype"]; // "onepager"

Alternatively, let jQuery format the data as an associative PHP array

$.ajax({
  method: "POST",
  url: "assets/send.php",
  data: {
    datas: dataObject
  }
})

This will post an application/x-www-form-urlencoded request body of

datas%5Bwebsitetype%5D=onepager&datas%5Blayout%5D=provided&datas%5Blayout_provided%5D=wireframes&datas%5Blanguages%5D=single&datas%5Bclient_name%5D=dasda&datas%5Bclient_email%5D=asdasd%40asdasd.fr&datas%5Bclient_conditions%5D=on&datas%5Bclient_newsletter%5D=on

PHP can read this as an array via $_POST

print_r($_POST['datas']);

Results in

Array
(
    [websitetype] => onepager
    [layout] => provided
    [layout_provided] => wireframes
    [languages] => single
    [client_name] => dasda
    [client_email] => [email protected]
    [client_conditions] => on
    [client_newsletter] => on
)

Pedro Rogério · Accepted Answer · 2020-09-28 01:42:24Z

0

Encode your data string into JSON.

const datas = [{
  websitetype: "onepager"
}, {
  layout: "provided"
}, {
  layout_provided: "wireframes"
}, {
  languages: "single"
}, {
  client_name: "dasda"
}, {
  client_email: "[email protected]"
}, {
  client_conditions: "on"
}, {
  client_newsletter: "on"
}]
const jsonString = JSON.stringify(datas)

$.ajax({
    type: 'POST',
    url: 'assets/send.php',
    data: { datas: jsonString },
    success: function(response) { },
});

In your PHP:

$data = json_decode(stripslashes($_POST['datas']));

// here i would like use foreach:

foreach($datas as $data){
   echo $data;
}

answered Sep 28, 2020 at 1:42

Pedro Rogério

1761 gold badge1 silver badge9 bronze badges

1 Comment

Phil Over a year ago

Why send JSON over application/x-www-form-urlencoded?

Collectives™ on Stack Overflow

Send an JS array through Ajax

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related