使用 mysqli 从 contentEditable div 保存数据答案

【问题标题】：Save data from contentEditable div with mysqli使用 mysqli 从 contentEditable div 保存数据
【发布时间】：2016-02-26 02:52:11
【问题描述】：

我正在尝试将数据从 contentEditable div 保存到 mySql DB。但似乎 '+' 符号不能存储在 DB 中。这是正确的概念还是我遗漏了什么？

index.php

<div id="la_sent" contentEditable=true></div>
<button class="saveChanges">Save changes</button>

script.js

$(document).ready(function(){
  $( ".saveChanges" ).click(function() {
      content = $('#la_sent').html();
      dataUrl = "iid=1&content="+content;
      $.ajax({
        url:"ajax.php",
        type:"POST",
        data:dataUrl,
        success:function(data){
            ...
      }});
  }); 
});

ajax.php

$type = $_POST['iid'];
$content = $_POST['content'];
$mysqli=connect_database(); //connection to database
$stmt = $mysqli->prepare('UPDATE email_structure SET content = ? WHERE type = ?');
$stmt->bind_param('ss', $content, $type);
$ress = $stmt->execute();
$stmt->close();
$mysqli->close();
echo "OK";

例如：如果我在 div 元素字符串 'a+b+c' 中写入，它会添加到 DB 字符串 'a b c' 中。知道为什么吗？

【问题讨论】：

我把它改成 GET 还是一样的结果。
加号默认替换为空格。尝试首先通过encodeURIComponent 在您的javascript 中传递content 变量。 dataUrl = "iid=1&content="+encodeURIComponent(content);
@Jeribo 非常感谢！解决了它:)
@Jeribo 我认为答案最适合标记为已解决；-) 干得好。

标签： php jquery mysql mysqli contenteditable

【解决方案1】：

为了安全起见，在将文本插入数据库之前（搜索、存储等），您应该始终对文本进行转义。请参阅 php 的 mysqli_real_escape_string 来执行此操作。即使您使用准备好的语句，您仍然应该转义您的字符。

如果确实有问题，您可以将 + 替换为另一个字符，然后在从数据库中检索时将其替换回来

【讨论】：

嗯？你把这个称作什么？ UPDATE email_structure SET content = ? WHERE type = ? 这是一个准备好的声明。这并不能解决这里的问题。
我是说即使他使用的是准备好的语句，他仍然应该逃避他的角色
好吧，用其他字符替换符号 + 不是干净的解决方案。
嗯，根据您的数据，您可以做很多事情：将其转换为 base64，加密它，但这些会明显变慢
准备好的语句不需要转义输入。

【解决方案2】：

默认情况下，加号会被替换为空格，因此您必须先对其进行编码。

encodeUriComponent 是在 javascript 中实现它的一种方法

因此，在将 content 变量附加到 encodeURIComponent 之前，编辑您的 script.js 以将其传递给 datUrl 应该可以解决问题。

$(document).ready(function(){
  $( ".saveChanges" ).click(function() {
      content = $('#la_sent').html();
      dataUrl = "iid=1&content="+encodeURIComponent(content);  //encode content variable
      $.ajax({
        url:"ajax.php",
        type:"POST",
        data:dataUrl,
        success:function(data){
            ...
      }});
  }); 
});

【讨论】：

我自己就是一个服务器端的人。 TBH，我在很久没有重新学习 JS 的东西后，我已经从这个答案中学到了； 干得好。 作为旁注：这绝对是他们对 jQuery 的使用导致了这个问题。如果 OP 没有使用它，他们的查询就会成功。
@Fred-ii- 我明白了。绝对更有趣的服务器端:-) 我不认为问题出在 jQuery 的使用上，因为如果我查看原始数据 (file_get_contents("php://input");) 我可以在 URL 中看到加号。只是一些时髦的业务服务器端
我在我这边使用准备好的语句进行了测试，结果是好的，无论如何在 UPDATE 上对我来说。