如何将数据发布到后端服务器以存储到数据库中？ [关闭]答案

【问题标题】：How to POST data to a backend server to store into database? [closed]如何将数据发布到后端服务器以存储到数据库中？ [关闭]
【发布时间】：2019-10-16 05:56:24
【问题描述】：

我想将下面的 div 数据存储到我的数据库中。

<div id="myContent" contenteditable="true">This is a simple text</div>

举个例子，我如何将这些数据发布到数据库中。

【问题讨论】：

1.使用 Jquery Ajax 函数 2. 你可以把这个 div 设为
你需要用 preg_match 或 Crawler 来解析它，或者你可以用那个 div 解析的数据发出 Ajax POST 请求
Mukesh 你能用一个小例子演示一下我不想使用或 <input> 标签只是 <div> 数据存储到数据库中... </div>
Viszman 我对 Ajax 不太了解，所以举个小例子...提前感谢两位
请看，How to ask a good question?

标签： javascript php jquery html

【解决方案1】：

您可以使用XMLHttpRequest 与服务器通信。

使用 XMLHttpRequest (XHR) 对象与服务器交互。您可以从 URL 检索数据，而无需刷新整个页面。这使得网页可以只更新页面的一部分，而不会中断用户正在做的事情。 XMLHttpRequest 在 AJAX 编程中被大量使用。

这是一个例子

// Read your data inside the HTML DIV using the ID
var content = document.getElementById('myContent').innerHTML;
// Add the contents to the object which you want to send to the backend
var data = { "myContent": content };

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 

var theUrl = "/json-handler"; // The backend URL which expects your data
xmlhttp.open("POST", theUrl);

// Set the request format
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

// JSON encode the data by stringifying it before sending to the server
xmlhttp.send(JSON.stringify(data));

【讨论】：

【解决方案2】：

    let myData=$('#myContent').html();
    $.ajax({
            method:'POST',
            url : 'put your file path where do want to handle data',
            data:{
                'data':myData 
                },
            success:function(returnMsg){
            console.log("Success Msg",returnMsg)
            }
        })

【讨论】：

【解决方案3】：

您需要：

使用JavaScript从div中提取数据
将其包含在您的 POST 请求中。
捕获并处理PHP 中的请求，将其存储在数据库中。

示例：

这是一个单独的 PHP 文件示例（没有整页刷新），但您可能需要更改部分 DATABASE_NAME_HERE 和 root（这是用户名）。

<?php
if (isset($_POST['submit'])) {
  // Escape possible HTML tags:
  $content = htmlspecialchars($_POST['myContent'], ENT_QUOTES | ENT_SUBSTITUTE);

  // Database connection.
  $db = new PDO('mysql:dbname=DATABASE_NAME_HERE', 'root', '');
  $db->query('CREATE TABLE IF NOT EXISTS `my_table` (id INTEGER PRIMARY KEY AUTO_INCREMENT NOT NULL, text VARCHAR(1024))');

  // Storing new record.
  $query = $db->prepare('INSERT INTO my_table VALUES (NULL, :text)');
  $query->bindValue(':text', $content);
  if ($query->execute()) {
    $response = 'Successfully stored: ' . $content;
  }
  else {
    $response = 'Error: ' . join(' ', $query->errorInfo());
  }

  exit($response);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>My title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('form#my_form_id').submit(function(e) {
      e.preventDefault();

      const content = $('#myContent').text();
      $.post('#', {submit: true, myContent: content}, function(response) {
        alert(response);
      });
    });
  });
</script>
</head>
<body>

<div id="center" style="text-align: center; margin-top: 150px;">
    <div id="myContent" contenteditable="true">This is simple text</div>

    <form id="my_form_id">
        <input name="username">
        <input type="submit" name="Send">
    </form>
</div>

</body>
</html>

注意：如果您想存储div 的整个 HTML 而不仅仅是上面的文本：

将$('#myContent').text()部分更改为$('#myContent').html()。

删除htmlspecialchars(...) 方法用法（例如$content = $_POST['myContent'];）。

【讨论】：

【解决方案4】：

您需要使用 AJAX 发送您的数据（如果您需要更多信息，请参阅：Introduction to Ajax - IBM）

所以：

获取您的 DOM 数据 -- 使用 javascript 代码；
将您的数据发送到服务器 API；
服务器保存数据。

xmlHttp / jQuery AJAX / Axios / 等你可以选择任何AJAX工具。

【讨论】：

【解决方案5】：

HTML

<div id="myContent" contenteditable="true">This is a simple text</div>

jQuery :

var data = $("#myContent").html();
var url = "--your url here--";
$.post(url,
  {
    html: data
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});

PHP

$db = mysqli_connect("localhost", "dbusername", "dbpass", "dbname");
$html_data = mysqli_real_escape_string($db, $_POST["html"]);
mysqli_query($db, "INESRT INTO MYTABLE(html_data) VALUES('$html_data')");

【讨论】：

【解决方案6】：

Part1 发送数据 第 1 步：获取您的 id = myContent 的值第 2 步：获取地址您要发送值 3 步骤：传递对象 4 进行回调自己看看是否成功

<script> 
            $.ajax({
                //1 Step
                var data = $('#myContent').val(),
                //2 Step
                url 'theUrlWhereYouWantToSend',
                //3 Step
                data: {data:data},
                //4 Step
                sucess: function hello(){
                 console.log("Transfering Data was sucessful"};

            });
            </script>

如果您有问题，请在注册时查看您的浏览器控制台 “网络”，如果它发送到你的 url（你想要传递的 url 数据）

> Part2 插入数据库

1 步骤：连接数据库

    $localhost = ""; ->ur localhost
    $password =""; ->ur Password
    $username = "root"; ->Ur username
    $db = "database"; ->Name of ur database (not table DATABASE)

如果你从来没有改变过一些东西，而不是完全使用我的代码，只改变数据库名称

第 3 部分将数据导入 PHP

if(!emtpty($_POST['myContent']){
 $newVariable = $_POST['myContent'];
}

>第 4 部分连接数据库 (PHP)

$link = mysqli_connect($localhost, $username, $password, $db);

3 控制

if(!$link){
 echo "Connection Failed";
}

3 步：将您的文件插入数据库

$query = "insert into URTABLENAME (ColumnName) values ('$newVariable')

4 步：将查询发送到您的数据库

$sql = mysqli_query($link, $query);

5 步检查

var_dump($sql);

【讨论】：

【解决方案7】：

我将在这里给出一个通用的答案，因为我不确定如何才能更具体。这里需要执行几个步骤。但首先，确定您需要的数据到底是什么？那么……

您应该能够在代码中访问 DOMElement。
您可以使用需要发送到服务器的数据创建一个对象
如果还没有，您可以在服务器上打开 API
然后，您可以在特定 API 端点发送 HTTP POST 请求，并将对象作为有效负载
您必须在服务器上编写代码来处理数据库的实际持久性

【讨论】：

小例子请教如何处理代码...thnx
好的，您能回答一下您希望在数据库中存储哪些信息吗？对于第 3 步和第 5 步，您使用的服务器和数据库类型也很重要

【解决方案8】：

按照以下步骤进行

使用 JavaScript 从 div 中获取数据
使用 ajax 调用将数据发送到服务器以存储到您的数据库中

（我假设你的 Jquery 已经定义好了）

<script type="text/javascript">
   var MyDiv1 = document.getElementById('myContent');

//// ajax calls to the server

</script>

【讨论】：