首页 > 解决方案 > 使用ajax将元素值发布到数据库

问题描述

我是数据库、ajax 和 php 的初学者。我希望用户从带有复选框的列表中做出选择,当做出选择时,选择被发送到数据库。我有这个代码:

<form method="post" action="post" class="registry-form">
<div class="list">
<div>
    <input id='label-1' type='checkbox' />
    <label for='label-1'>
    <h3>
        <span>Studio Noos Mom Bag | Urban Woollish</span>
        <span>
          <br />
          <a href="https://www.degeleflamingo.com/collections/juweeltjes-voor-mama/products/studio-noos-mom-bag-all-black-rib?variant=31254237020230" target="_blank">Bekijk product</a>
        </span>
      </h3>
    </label>
  </div>
  ...
</div>
</form>

<input type="submit" class="gift-btn" value="submit choice" />

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

$(".list div input[type=checkbox]").change(function() {
  $(this).parent().toggleClass('checked');
});

$('.registry-form').submit( function(e) {
    e.preventDefault();

    var geboortelijst_beschrijving = $(".list .checked h3 span:first-child").html();
    console.log(geboortelijst_beschrijving);

    $.ajax({  
        type: "POST",
        url: "post.php",  
        dataType:'json',
        data: geboortelijst_beschrijving,
        success: function(data){  
            $(".list .checked").addClass('taken');
        }  
    });
    return false;
});
});
</script>

post.php:

<?php
header("Content-Type: application/json", true);
$conn = mysqli_connect("localhost","root","root","geboortelijst");
if(!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$geboortelijst_beschrijving = $_POST['geboortelijst_beschrijving'];

//$geboortelijst_beschrijving = mysqli_real_escape_string($conn, $_POST['geboortelijst_beschrijving']);


if(mysqli_query($conn, "INSERT INTO geboortelijst(geboortelijst_beschrijving, geboortelijst_status)
    VALUES('" . $geboortelijst_beschrijving . "', '1')")) {
 echo '1';
} else {
   echo "Error: " . $sql . "" . mysqli_error($conn);
}

mysqli_close($conn);
?>

我从 post.php 得到的响应总是 200 0K,但我不知道为什么“geboortelijst_beschrijving”没有发送到我的数据库。这个值是空的,我总是而且只得到“1”(当然来自 geboortelijst_status)。

有人有一些见解吗?

标签: phpjqueryajax

解决方案


$(".list .checked h3 span:first-child")不是正确的选择器。这是在寻找h3包含在复选框元素中的一个,但复选框不是容器。

您想要的h3是复选框的兄弟,而不是后代,然后span在其中找到第一个。

var geboortelijst_beschrijving = $(".list .checked").siblings("h3").find("span:first-child").html();

推荐阅读