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

Question

我正在尝试通过 Ajax jQuery 将信息从我的 HTML 列表传递到数据库。我不确定我的方法是否有效以及我应该如何进行。我最大的问题是如何从列表中获取正确的信息，以便我可以将它们传递到 PHP 页面并插入它们。我从 get_data 函数中得到的是这样的:

James blue Looks Good

Rebecka black Looks very bad

我要做的是将此信息插入到我的数据库中的 colors.php 文件中。我的表看起来像这样:

personcolor_nameopinion

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

Answer 1

每次迭代都会覆盖 person、color_name 和 opinion 变量的值。而且 get_data() 无论如何都不会返回任何内容，因此不会为 data 分配任何内容，也不会向您的 PHP 页面发布任何内容。

您需要在每次迭代中保存收集的值，可能在一个数组中，然后在最后返回该数组。我不知道您的 PHP 页面期望什么，但像这样:

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