使用 JS 和 PHP 将 <div> 保存到 MySQL - 可能吗？答案

【问题标题】：Saving a <div> to MySQL using JS and PHP - possible?使用 JS 和 PHP 将 <div> 保存到 MySQL - 可能吗？
【发布时间】：2019-01-28 18:13:56
【问题描述】：

我有一个 HTML/PHP 插入表单，其中一个条目需要改进。有问题的条目是“成员”。

为此，我有以下代码（归功于 @Joe Warner ）可以在没有 PHP here 的情况下进行测试

基本上我将<div> 保存到一个PHP 变量中，然后打印出来。它工作得很好。

<?php $msgs = "<div id='output'></div>"
echo $msgs; ?>

这应该是每个添加的成员的一个字符串。

问题是我无法将其他字段推送到 MySQL（提交时会推送每个字段）。似乎该变量首先被假定为空白，并且仅在 getResults() 之后才被填充。

我知道它很乱，但目前无法更改表单。

有什么建议吗？

const optionsSelect = [{
    id: 1,
    title: 'Mr'
  },
  {
    id: 2,
    title: 'Mrs'
  }
];

function getResults() {
  const { selects, inputs } = getInputs();

  return selects.reduce((acc, select, i) => {
    const { title, name } = getValuesFromElements(select, inputs[i]);
     msgs = (title && name) ? `${acc} ${title}. ${name}` : acc;
    document.getElementById("output").innerHTML = msgs; 
    return (title && name) ? `${acc} ${title}. ${name}` : acc;
  }, '');
}

function getValuesFromElements(select, {value: name}) {
  const { title } = optionsSelect[select.value - 1];

  return {title, name};
}

function getContainerElements(query) {
  return Array.from(document.querySelectorAll(`#container > ${query}`));
}

function getInputs() {
  const selects = getContainerElements('select');
  const inputs = getContainerElements('input');

  return {
    selects,
    inputs
  }
}


function addFields() {
  const { value: number } = document.getElementById('member');
  const container = document.getElementById('container');

  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }

  for (let i = 0; i < number; i++) {
    const select = document.createElement('select');
    for (let j = 0; j < optionsSelect.length; j++) {
      const options = document.createElement('option');
      options.value = optionsSelect[j].id;
      options.text = optionsSelect[j].title;
      select.appendChild(options);
    }
    container.appendChild(select);
    container.appendChild(document.createTextNode(' -> Name ' + (i + 1)));
    const input = document.createElement('input');
    input.type = 'text';
    container.appendChild(input);
    container.appendChild(document.createElement('br'));
  }
}

<input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<a href="#" onclick="console.log(getResults())">Log results</a>
<div id="container"></div>
<?php $msgs = "<div id='output'></div>"
echo $msgs; ?>

编辑

我尝试添加第二个链接到 PHP 函数的按钮以获取 $msgs 的当前值，但仍然无法正常工作。它通过了 MySQL 插入（“记录更新成功”），但在数据库中仍然只保存空白。

<a href="index.php?msgs=true">Insert into DB</a>

<?php
 $msgs = "<div id='asservat'></div>";
 echo $msgs;

 function insertMsgs() {
   $server = 'myserver';
   $user = 'myuser';
   $pass = 'mypass';
   $db = 'mydb';
   $conn=mysqli_connect($server, $user, $pass, $db);
   if (mysqli_connect_errno()) {
     echo ("Connection failed: " . mysqli_connect_error());
   }
   $sql= "UPDATE mytable SET myfield='$msgs' WHERE member=blabla";
   if (mysqli_query($conn, $sql)) {
       echo "Record updated successfully";
   } else {
       echo ("Error updating record: " . mysqli_error($conn));
   }
   mysqli_close($conn);
}

if (isset($_GET['msgs'])) {
  insertMsgs();
}

【问题讨论】：

不要将 html 保存到数据库，这是一种不好的做法，因为它可能会为您打开 SQL 注入，因为您无法清理输入。基本上，如果有人输入了一些带有错误脚本的 html，它可以在页面上呈现给所有人，从而窃取 cookie 访问令牌等。
其实我没有。
'select' 是一个 JS 关键字。尝试使用其他东西，比如在你的 reduce 函数中
还好我的坏:)

标签： javascript php html mysql

【解决方案1】：

我使用以下代码进行管理：

get_names.html

<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
<script type='text/javascript'>
    const optionsSelect = [{
    id: 1,
    title: 'Mr'
    },
    {
    id: 2,
    title: 'Mrs'
    }
    ];
    function getResults() {
    const { selects, inputs } = getInputs();

    return selects.reduce((acc, select, i) => {
    const { title, name } = getValuesFromElements(select, 
inputs[i]);
    msg = (title && name) ? `${acc} ${title}. ${name}` : acc;
    document.getElementById("asservat").innerHTML = msg;
    var msgs = msg;
    //return (title && name) ? `${acc} ${title}. ${name}` : acc;
    return msgs;
    }, '');
    }

    function getResultsAsArray() {
    const { selects, inputs } = getInputs();

    const getFieldValues = (select, i) => {
    const { title, name } = getValuesFromElements(select, 
 inputs[i]);

    return (title && name) ? `${title}. ${name}` : '';
    };

    return selects.map(getFieldValues).filter(Boolean);
    }

    function getValuesFromElements(select, {value: name}) {
    const { title } = optionsSelect[select.value - 1];

    return {title, name};
    }

    function getContainerElements(query) {
    return Array.from(document.querySelectorAll(`#container > 
${query}`));
    }

    function getInputs() {
    const selects = getContainerElements('select');
    const inputs = getContainerElements('input');

    return {
    selects,
    inputs
    }
    }
    function addFields() {
    const { value: number } = document.getElementById('member');
    const container = document.getElementById('container');

    while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
    }

    for (let i = 0; i < number; i++) {
    const select = document.createElement('select');
    for (let j = 0; j < optionsSelect.length; j++) {
      const options = document.createElement('option');
      options.value = optionsSelect[j].id;
      options.text = optionsSelect[j].title;
      select.appendChild(options);
    }
    container.appendChild(select);
    container.appendChild(document.createTextNode(' -> Name ' + (i + 1)));
    const input = document.createElement('input');
    input.type = 'text';
    container.appendChild(input);
    container.appendChild(document.createElement('br'));
    }
    }

    </script>

    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <a href="#" onclick="console.log(getResults())">Log results</a>
    <p id="container"></p>
    <div id="asservat"></div>
    <input type="button" value="Submit" onclick="post();">ajax<br />
    <script type="text/javascript">
    function post(){
    var name = getResults();
    $.post('return_names.php',{postname:name},
    function(data){
    $('#name').html(data);
    });
    return $('#name').html(data);
    }
    </script>

return_names.php

    <?php
    function data() {
    $name = $_POST['postname'];
    echo "Name as string ->", $name, " <- here";
    return $name;
    }
    data();
    ?>

【讨论】：