php - 从 jQuery AJAX 调用的列表项中获取值和名称

Question

我正在从数据库生成一个值列表，如下所示:

<div class="pure-u-1 pure-u-md-2-5 pure-u-lg-2-5 content-left">
  <div id="scroll" class="card">
  <a href="javascript:showhide('green')"><h2 class="is-center">green</h2></a>
    <ul id="greens" class="card-content-ingredients" style="list-style-type: none;">
      <?php
      foreach ($greens as $green) {
        echo "<li>";
        echo "<input type='hidden' class='item_id' value='" . $green['id'] . "' name='" . $green['name'] . "'>";
        echo "<span class='item-name-small'>" . $green['name'] . "</span>";
        echo "<span class='item-description-menu'>" . $green['description'] . "</span>";
        echo "<span class='content-right'>";
        echo "</span>";
        echo "</li>";
      }?>
    </ul>
  </div>
</div>

我有一个 jQuery 函数，它尝试抓取被单击以传递到另一个页面的项目:

  <script>
    $(document).ready(function(){
      $('ul.card-content-ingredients li').click(function(){
        var form_data = $(this).serialize();
        $.ajax({
          url: "add-to-cart.php",
          type: "POST",
          dataType: "json",
          data: form_data,
          success: function() {}
        });
      });
    });
  </script>

我很难发送实际的数组。我尝试通过 $(this).attr('id") 获取元素信息，但这不起作用，我尝试序列化，现在只是捕获救命稻草。我是什么失踪了？

示例:var_dump($greens)

array (size=31)
  0 => 
    array (size=10)
      'id' => string '19' (length=2)
      'name' => string 'Almond Slices' (length=13)
      'description' => string 'TOASTED' (length=7)
      'price' => string '0.65' (length=4)
      'nutritionix_id' => string '529e7dd1f9655f6d35001ce1' (length=24)
      'nutritionix_cal' => string '110' (length=3)
      'active' => string '1' (length=1)
      'ingredienttype_id' => string '2' (length=1)
      'subtype' => string '' (length=0)
      'in_stock' => string '1' (length=1)
  1 => 
    array (size=10)
      'id' => string '57' (length=2)
      'name' => string 'Apples' (length=6)
      'description' => string 'Red Jacket' (length=10)
      'price' => string '0.65' (length=4)
      'nutritionix_id' => string '529e7dd1f9655f6d35001d21' (length=24)
      'nutritionix_cal' => string '20' (length=2)
      'active' => string '1' (length=1)
      'ingredienttype_id' => string '2' (length=1)
      'subtype' => string 'fruit' (length=5)
      'in_stock' => string '1' (length=1)
  2 => 
    array (size=10)
      'id' => string '58' (length=2)
      'name' => string 'Asparagus' (length=9)
      'description' => string 'STEAMED' (length=7)
      'price' => string '0.65' (length=4)
      'nutritionix_id' => string '529e7dd1f9655f6d35001d1e' (length=24)
      'nutritionix_cal' => string '0' (length=1)
      'active' => string '1' (length=1)
      'ingredienttype_id' => string '2' (length=1)
      'subtype' => string 'veggies' (length=7)
      'in_stock' => string '1' (length=1)
  3 => 
    array (size=10)
      'id' => string '42' (length=2)
      'name' => string 'Banana Peppers' (length=14)
      'description' => string '' (length=0)
      'price' => string '0.65' (length=4)
      'nutritionix_id' => string '529e7dd1ea63d49335001ce4' (length=24)
      'nutritionix_cal' => string '10' (length=2)
      'active' => string '1' (length=1)
      'ingredienttype_id' => string '2' (length=1)
      'subtype' => string 'veggies' (length=7)
      'in_stock' => string '1' (length=1)
  4 => 
    array (size=10)
      'id' => string '43' (length=2)
      'name' => string 'Beets' (length=5)
      'description' => string 'Fresh' (length=5)
      'price' => string '0.65' (length=4)
      'nutritionix_id' => string '529e7dd1ea63d49335001cde' (length=24)
      'nutritionix_cal' => string '30' (length=2)
      'active' => string '1' (length=1)
      'ingredienttype_id' => string '2' (length=1)
      'subtype' => string 'veggies' (length=7)
      'in_stock' => string '1' (length=1)
  5 => 
    array (size=10)
      'id' => string '59' (length=2)
      'name' => string 'Black Beans' (length=11)
      'description' => string 'Organic' (length=7)
      'price' => string '0.65' (length=4)
      'nutritionix_id' => string '529e7dd1ea63d49335001d3f' (length=24)
      'nutritionix_cal' => string '35' (length=2)
      'active' => string '1' (length=1)
      'ingredienttype_id' => string '2' (length=1)
      'subtype' => string 'veggies' (length=7)
      'in_stock' => string '1' (length=1)

Answer 1

我看到的问题是，你的 JS 代码是假设你正在提交表单而编写的，但实际上你不是。

让我快速解释一下表单。通常，当提交表单时，它会查看输入元素中的 name 属性。例如，如果您有这样的表单:

<form method="POST" action="some_link.php">
    <input type="hidden" name="myinput1" value="myvalue1"/>
    <input type="hidden" name="myinput2" value="myvalue2"/>
    <input type="submit"/>
</form>

当单击“提交”按钮时，焦点将位于其父表单上，它将查看方法(在本例中为POST)并收集表单中的所有输入名称以创建数组。如果输入的姓名不存在，则忽略，如果姓名相同，则重写姓氏。在提供的示例中，提交表单时，以下 POST 数组将按如下方式发送到 PHP:

array (size=2)
  'myinput1' => string 'myvalue1' (length=1)
  'myinput2' => string 'myvalue2' (length=1)

如果您的 HTML 中有表单，那么这会非常有用，但您没有。因此，JS 代码 $(this).serialize() 将不起作用，因为 serialize() 假定您提交了一个表单。我会取消 FORM 结构并重写 HTML，以便我们可以通过 AJAX 手动发送信息，如下所示:

<ul id="greens" class="card-content-ingredients">
    <?php foreach ($greens as $green) { ?>
        <li>
            <span class='item_id' style='display:none'><?= $green['id'] ?></span>
            <span class='item-name-small'><?= $green['name'] ?></span>
            <span class='item-description-menu'><?= $green['description'] ?></span>
            <span class='content-right'></span>
        </li>
    <?php } ?>
</ul>

到目前为止，我们迭代了这些项目以创建一个 li 来保存该项目的信息，特别是该项目的 ID、名称和描述。每个项目元素在您的情况下都有一个类:item_id、item-name-small、item-description-menu。现在您需要问自己，当我将此信息发送到 add-to-cart.php 时，我应该只发送 ID 还是发送我已从数据库请求的所有信息？我只会发送您已经拥有的内容，这样您就不会再进行数据库查询。因此，当li被点击时，代码需要收集所有信息。为了收集项目信息并通过 AJAX 将其发送到 PHP，我将创建以下 JS:

<script>
    $(document).ready(function () {

        $('ul.card-content-ingredients li').click(function () {
            var postdata = {
                id: $(this).find('.item_id').text(),
                name: $(this).find('.item-name-small').text(),
                description: $(this).find('.item-description-menu').text()
            };
            $.ajax({
                url: "add-to-cart.php",
                type: "POST",
                dataType: "json",
                data: postdata,
                success: function (data) {
                    console.log(data);
                }
            });
        });
    });
</script>

PHP 现在应该能够像这样接收 POST 请求:

<?php
$id = $_POST['id'];
$name = $_POST['name'];
$description = $_POST['description'];

希望综上所述，您现在能够提交您的 AJAX 请求。让我知道这是否适合您，如果不适合，我可以继续更深入地解释。