来自Ajax jQuery数组的未定义的POST索引

Question

Im trying to insert the info from the array into my database. The problem im having is first of all that i am getting undefined index of $_POST['Person'], $_POST['Color_name'], $_POST['Opinion'] from the php.

The second issue is that i would like to use dataType: "json"; in my Ajax jQuery but my data is not reaching the php file if i use it.

What i have tried so far is to json stringify my return data in the get_data function without any success. I also tried decoding the data in the php but since it's getting undefined index i am guessing there has to be some work done in the jQuery.

This is the array the get_data() function returns

{Person: "James", Color_name: "blue", Opinion: "Looks good"}
{Person: "James", Color_name: "green", Opinion: "Looks ok"}
{Person: "Rebecka", Color_name: "blue", Opinion: "Looks bad"}
{Person: "Rebecka", Color_name: "black", Opinion: "Looks very bad"}

HTML

<div>
  <ul data-person="James">
    <li data-color_opinion="blue">Looks good</li>
    <li data-color_opinion="green">Looks ok</li>
  </ul>
  <ul data-person="Rebecka">
    <li data-color_opinion="blue">Looks bad</li>
    <li data-color_opinion="black">Looks very bad</li>
  </ul>
</div>

JQuery

function get_data() {
  var data = [];
  $.each($('ul'), function(i, el) {
    $.each($(el).find("[data-color_opinion]"), function(j, child) {
      let person = $(el).data('person');
      let color_name = $(child).data('color_opinion');
      let opinion = $(child).text();
      data.push({ Person: person, ColorName: color_name, Opinion: opinion });
    });
  });
  return data;
};
console.log(get_data())

$.ajax({
type: "POST",
url:'colors.php',
data:get_data´(),
success: function(data) {
  console.log(data);
}
});
});

PHP

<?php

$servername = "servername";
$username = "username";
$password = "password";

$person = $_POST['Person'];
$color_name = $_POST['Color_name'];
$opinion = $_POST['Opinion'];


try {
$db = new PDO("mysql:host=$servername;dbname=DB_NAME", $username, $password);
 $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
 $db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);


 $sql = "INSERT INTO colors (person, color_name, opinion)
     VALUES ($person, $color_name, $opinion)";

$db->exec($sql);
echo "New records created successfully";
}
catch(PDOException $e)
{
echo $sql . "<br>" . $e->getMessage();
}
$db = null;

 ?>

Answer 1

There is no $_POST['Person']; because all the javascript objects are in an outer array and get_data() returns the whole array

Try something like:

$.ajax({
  type: "POST",
  url: 'colors.php',
  data: {items : get_data()},
        // ^^ items contains an array
  success: function(data) {
    console.log(data);
  }
});

Then in php

$items = $_POST['items'];// is array of sub arrays

foreach($items as $item){
   $person = $item['Person'];
    // get the other values and do a query within each iteration of this loop
}