Question

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

James blue看起来不错

Rebecka black看起来很糟糕

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

person
color_name
opinion

所以它应该是这样的：

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页面有什么期望，但是像这样：

＆＃13;

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

＆＃13;

Answer 2

你的get_data函数没有返回任何内容。

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;

};

Answer 3

你想要的是一个对象数组，当发送到php时会成为一个可以循环的关联数组的数组

目前在您的each中，您不会对每个变量做任何事情。将使用它们来创建一个对象。

此外，您的功能还没有return，因此会返回结果数组

＆＃13;

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())

＆＃13;

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

＆＃13;

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

＆＃13;

使用ajax将信息传递给db

3 个答案: