时间戳

首页 > 解决方案 > 将 HTMLcollection 发送到数据库

javascript - 将 HTMLcollection 发送到数据库

问题描述

所以我有这张表contenteditable divs，当用户在 a 中输入内容时，div他们必须单击一个按钮，该按钮收集所有内容divs并将它们存储到Var OBJ.

document.getElementById("done_editing").addEventListener("click", get_values);
var OBJ = [];

function get_values() {
  let divobj = document.querySelectorAll('[contenteditable=true]')
  for (var i = 0; i < divobj.length; i++) {
    OBJ.push(divobj[i].textContent)
    //console.log(OBJ)  
  }

  OBJ = OBJ.filter(item => item)
  console.log(OBJ)

我想将其中的值发送var OBJ到数据库。我不知道如何做到这一点。这不是您的平均形式，所以我想我必须使用 ajax，但我没有使用 ajax 的经验。这就是我为ajax 所拥有的。

    $.ajax({
    type: "POST",
    url: "test.php",
    data: { arraykey: OBJ },
    success: function (response) {
      alert('succes')
      // You will get response from your PHP page (what you echo or print)
    },
    error: function (jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  })

}

任何人都可以为我指出如何使用 ajax 以及如何配置 php 文件的正确方向？

.php 文件：

 //Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}


$data = isset($_POST['arraykey']);
if ($data)
{
  $array = $_POST["arraykey"];
  echo $array;
  echo " is your array";
} 
else 
{
  $array = null;
  echo "no array supplied";
}



/*$data = isset($_POST['OBJ']);

print_r($_POST);
*/
// close connection
mysqli_close($link);

?>

提前致谢 ！

标签： javascriptphpajax

解决方案

由于有多个divs，您可以使用array它来添加多个值并将其发送到 ajax。

演示代码：

document.getElementById("done_editing").addEventListener("click", get_values);

var OBJ = [];

function get_values() {
  let divobj = document.querySelectorAll('[contenteditable=true]')
  for (var i = 0; i < divobj.length; i++) {
    OBJ.push(divobj[i].textContent); //add in array 

  }
  console.log(OBJ)
  //your ajax call
  $.ajax({
    type: 'POST',
    url: 'test.php',
    data: {
      OBJ: OBJ //pass array to php 
    },
    success: function(data) {
      alert("something");
    }
  });
}
div {
  border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contentEditable="true"></div>
<div contentEditable="true"></div>
<div contentEditable="true"></div>
<div contentEditable="true"></div>

<button id="done_editing">Done</button>

您的 php 将如下所示：

  <?php
    // You should call this first
     session_start();
    $data = isset($_POST['arraykey']);
     if ($data)
       {
       $_SESSION['arraykey'] = $_POST["arraykey"];//putting aray value in session
       echo  $_SESSION['arraykey'];
       echo " is your array";
        } 
        else 
        {
        echo "no array supplied";
       }

        ?>

推荐阅读