使用ajax将信息传递给数据库

I am trying to pass the information from my HTML list to a database via Ajax jQuery. I'm unsure if my approach will work and how I should proceed. My biggest issue is how to get the correct information from the list so I can pass them to the PHP page and insert them. What I'm getting from my get_data function is something like this:

James blue Looks Good

Rebecka black Looks very bad

What I will be trying to do is insert this info to my database in the colors.php file. My table looks like this:

person
color_name
opinion

So it should for example look like this:

person = James
color_name = blue
opinion = Looks good

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 Ajax

function get_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();
    });
  });
};

$.ajax({
  type: "POST",
  dataType: "json",
  url: 'colors.php',
  data: get_data(),
  success: function(data) {
    //data is what your PHP page send you back,
    //what do you want to do with it?
    console.log(data);
  }
});

Each iteration is overwriting the values of the person, color_name, and opinion variables. And the get_data() is not returning anything anyway, so nothing gets assigned to data and nothing gets posted to your PHP page.

You need to save the collected values in each iteration, probably in an array, and then return that array at the end. I don't know what your PHP page is expecting, but something like this:

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;
};

</div>

Your get_data function is not returning anything.

function get_data(){
  // initialize an empty js object/dict
  let 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();
          // push to object
          data[person]["color_name"] = color_name;
          data[person]["opinion"] = opinion
          });

     });
     return data;

};

What you want is an array of objects that when sent to php would become an array of associative arrays that you can loop over

Currently in your each you aren't doing anything with each variable. Will use those to create an object.

Also your function doesn't have a return so will have it return the results array

function get_data() {
  // empty array to populate
  let dataArray = [];

  $('ul[data-person]').each(function(i, el) {
    let $ul = $(this),
      $items = $ul.children('[data-color_opinion]'),
      // get data-person value from <ul>
      person = $ul.data('person');
    // now loop over the items
    $items.each(function(i, el) {
      let $item = $(el)
      let obj = {
        person: person, // from above
        color_name: $item.data('color_opinion'),
        opinion : $item.text()
      };      
      dataArray.push(obj);
    });
  });  
  return dataArray;

}


console.log(get_data())

.as-console-wrapper {max-height: 100%!important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

</div>