时间戳

首页 > 解决方案 > 通过 AJAX 将 html 数据从 div 复制到 MySQL 数据库

javascript - 通过 AJAX 将 html 数据从 div 复制到 MySQL 数据库

问题描述

我有一些由网站用户通过 PHP MySQL 创建的 div。

我正在尝试创建一个复制功能，因此任何用户都可以查看其他用户的数据并能够将其他数据“复制”到他们自己的个人资料中。

这是从我的数据库中打印的 div 片段：（我删除了 SQL 内容，以使这篇文章尽可能简单，因为这部分正在正常工作）

  echo '<div class="profilecontainer">';

     echo '<div class="profile">';
     echo '<div class="optionhover">'; ?> <a class="a" href="<?php  echo 'download.php?id='. urlencode($fil_id)?><?php echo '">Download</a></br><p><a class ="copy" href="#" onclick="copytoprofile()">Copy</a></div>';
     echo '<div class="profilehover"><div class="title">'.$title.
     '</div></br>';
     echo '<div class="date">'.$date.
     '</div></br>';
     echo 'Name: <div class="name">'.$name.
     '</div></br>';
     echo 'Category: <div class="category">'.$category.
     '</div></br>';

我是 AJAX 和 jQuery 的新手，我只能找到相反的指南和 SO 帖子；从数据库中获取数据到页面。

我需要的是获取已显示在站点上的数据，并将其作为新数据插入到数据库中。

所以这是我最好的尝试，但我知道它可能远非正确......但只是为了展示我已经尝试过的内容：

<script type="text/javascript">
function copytotimeline() {
    $(document).ready(function() {
        $('.profilecontainer .profilehover .date').each(function() {
            $(this).click(function(){
                var date = $(this).innerHTML();
                $.ajax({
                    type: "POST",
                    url: "copy.php",
                    data: { "date": date },
                    cache: false,
                    success: function(result){
                        $("#display").html(result);
                    }
                });

                return false;
            });
        });
    });
}

</script>

上面的代码试图从 div 容器中获取“日期”信息。理想我想要容器内的所有东西，所有变量和文件。

我猜我应该在我的 copy.php 页面上执行 sql 插入查询。

标签： javascriptphpjquerymysql

解决方案

function CopyDatetoProfile(mydiv){
var $this=$(mydiv);
var my_date=$this.html();
  console.log('My Date :',my_date);
  //here you can write your ajax im doing it below the script
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="date" onclick="CopyDatetoProfile(this);">12-01-2019</div>
<div class="date" onclick="CopyDatetoProfile(this);">13-01-2019</div>
<div class="date" onclick="CopyDatetoProfile(this);">14-01-2019</div>
<div class="date" onclick="CopyDatetoProfile(this);">15-01-2019</div>
</div>

上面的代码为您提供了具有类“日期”的 div 中的 HTML 文本。现在您必须调用 ajax 来发布这些数据并保存到您的数据库中。我采用了一个变量名称日期，它将作为 $_POST 的索引反映在您的 php 脚本中；

$.ajax({
    type: "POST",
    url: "copy.php",
    data: { date: my_date },
    cache: false,
    success: function(result){
        $("#display").html(result);
    }
});

现在您的 php 页面将如何接收数据以及您将如何做必要的事情：

<?php 
if(isset($_POST['date'])){
     $date_to_insert=$_POST['date'];
     /*  your process */
}

?>

推荐阅读