在 MySQL 数据库中累积空格的字符串值

Question

我有一个网页，管理员用户可以在其中编辑页面上的文本。但是当他们将文本插入 mysql 数据库时，有时会在实际内容之前添加越来越多的空格。
如果您将 cursur 放在页面上的第一个单词之前并垃圾邮件退格一段时间，数据库中的空格就会消失。但随着时间的推移，你越是不断地编辑页面，就会再次添加越来越多的空白。

我做了很多故障排除，但我就是不知道是什么原因导致添加了空格。它并不总是发生，因此很难排除故障。

这是我的代码：

由于我的代码很长，我尝试将大部分内容翻译成英文。
如果您想翻译尚未翻译的内容，则原文为荷兰语。

over_ons.php - 显示数据库中的编辑按钮和页面内容。

//Active page:
$pagina = 'over_ons'; ?>
<input type='hidden' id='pagina' value='<?php echo $pagina; ?>'> <!--Show active page to javascript--><?php
//Active user:
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){
$editor = $_SESSION['gebruikersnaam']; ?>
<input type='hidden' id='editor' value='<?php echo $editor; ?>'> <!--Show active user to javascript--><?php  
} ?>

<!--Editable DIV: -->
<div class='big_wrapper'><?php
        //Get eddited page content from the database
        $query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina='" .$pagina. "'");
        while($inhoud_test=mysql_fetch_array($query)){
            $inhoud=$inhoud_test[0];
        }

    //Show Content
    ?><div id='editedText'><?php echo $inhoud; ?></p></div>

<!--Show edit button-->
<?php
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin')
{?>
    <div id='sidenote'>
        <input type='button' value='Bewerken' id='sent_data' class='button' />
        <div id="feedback" />
    </div>
<?php }

javascript.js - 将页面内容发送到 php 文件 sent_data.php:

//If the system is in edit mode and the user tries to leave the page,
//let the user know it is not so smart to leave yet.
$(window).bind('beforeunload', function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button

if(value == 'Verstuur bewerkingen'){
    return 'Are you sure you want to leave the page? All unsaved edits will be lost!';
}
});

//Make content editable and send page content
$('#sent_data').click(function(){
    var value = $('#sent_data').attr('value'); //change the name of the edit button

    if(value == 'Bewerken'){
        $('#sent_data').attr('value', 'Verstuur bewerkingen');  //change the name of the edit button
        var $div=$('#editedText'), isEditable=$div.is('.editable'); //Make div editable
        $div.prop('contenteditable',!isEditable).toggleClass('editable')
        $('#feedback').html('<p class="opvallend">The content from<BR>this page is now<BR>editable.</p>');
    }else if(value == 'Verstuur bewerkingen'){
                var pagina = $('#pagina').val();
                var editor = $('#editor').val();
                var div_inhoud = $("#editedText").html();
                $.ajax({
                type: 'POST',
                url:  'sent_data.php',
                data: 'tekst=' +div_inhoud+ '&pagina=' +pagina+ '&editor=' +editor,
                success: function(data){
                Change the div back tot not editable, and change the button's name
                    $('#sent_data').attr('value', 'Bewerken');  //change the name of the edit button
                    var $div=$('#editedText'), isEditable=$div.is('.editable'); //Make div not editable
                    $div.prop('contenteditable',!isEditable).toggleClass('editable')

                //Tell the user if the edditing was succesfully
                    $('#feedback').html(data);
                    setTimeout(function(){
                        var value = $('#sent_data').attr('value'); //look up the name of the edit button
                        if(value == 'Bewerken'){ //Only if the button's name is 'bewerken', take away the help text
                        $('#feedback').text('');
                        }
                        }, 5000);
                    }
                    }).fail(function() {
                    //If there was an error, let the user know
                        $('#feedback').html('<p class="opvallend">There was an error.<BR>Your changes have<BR>not been saved.<BR>Please try again.</p>');
                    });
    }
});

最后，
sent_data.php - 从 javascript、js 获取页面内容并插入数据库：

<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');

//Look up which page has to be edited
$pagina=$_POST['pagina'];
//Get the name of the person who eddited the page
$editor=$_POST['editor'];
//Get content:
$tekst=$_POST['tekst'];
$tekst = mysql_real_escape_string($tekst);
$tekst = trim($tekst);

$query="UPDATE paginas SET naam_editer='" .$editor. "', inhoud='" .$tekst. "' WHERE naam_pagina='" .$pagina. "'";

}
    if(mysql_query($query)){
        echo "<p class='opvallend'>Successfully saves changes.</p>";
    }else{
        echo "<p class='opvallend'>Saving of changes failed.<BR>
        Please try again.</p>";
    }
?>

额外信息：
PHP 版本：5.5.15
jQuery 版本：1.11.1
在浏览器中测试：Chrome
数据库：phpMyAdmin 5.5.39
内容以 VARCHAR 类型插入，空间为 10000 个字符

提前感谢您的帮助！

解决方案

感谢很多人的大力帮助，尤其是@avnishkgaur，它现在运行良好。这是我调整的内容（也在我上面的代码中更改了它，所以现在是工作代码）。

1. Removed all the white spaces I had in my code between <div id='editable'> and <?php
2. Added $tekst = trim($tekst); to my PHP file to remove white spaces (didn't work)
3. Placed the editable text into another div as the code for getting the data from the database (was in the same div before)
4. Renamed the ID from the editable div to editedText. Also changed the name in the javascript file. This solution made it work perfectly (it was 'editable' before).

这是一个意想不到的解决方案，所以我认为这也可以帮助其他人。

Answer 1

首先，我强烈建议使用 mysqli 或 PDO 而不是 PHP 中的 mysql 函数，因为这些已被弃用。请在 PHP.net 上查看。

至于您的问题，我没有尝试重现该问题。我建议您记录并检查逐步发生的情况，例如记录div_inhoud var，此阶段是否已包含空格？等等。

如果您赶时间，您还可以在sent_data.php 中的$tekst var 上使用PHP 函数ltrim，这将修剪左侧的所有空格（或您想要的任何字符从字符串中修剪）

Answer 2

尝试在您的 send_data.php 中添加 trim() 函数，这将帮助您去除空格。

$tekst = trim($_POST['tekst']);

Answer 3

我的猜测是<div id='editable'> 和?> 之后的换行符以及over_ons.php 中<?php 的缩进添加了额外的空格。具体来说，文件中的缩进处有几个额外的/n 和空格。

您可以在将其保存到数据库之前修剪空白，或者在 ajax 调用之前，或两者兼而有之。

在 php 中，trim()：

sent_data.php

$tekst = trim($tekst);

或者javascript，str.trim():

javascript.js

var div_inhoud = $("#editable").html().trim();

另外，您可能需要考虑使用PHP Data Objects，而不是直接将变量插入到您的 SQL 语句中。它实际上非常易于使用，并且在我看来使代码更易于阅读和更可重用。有一个fantastic tutorial by Tuts+ 可以轻松学习和入门。这将确保您不会意外允许 SQL 注入问题进入您的应用程序。

Answer 4

至于为什么要添加额外的空格，我认为是因为您将数据库中的文本直接插入到div中（其中包含html代码中的一些空格，在呈现页面时会被删除）。

一种有效的解决方案是将您的内容插入

标签，大概是这样的：

<div class='big_wrapper'>
<p id='editable'></p>
</div>

另一种解决方案是在插入 db 之前修剪文本。您可以在 javascript post 阶段执行此操作，也可以在插入 mysql db 之前执行此操作。

在 jQuery 中，（你正在使用的）你可以实现这个：

data: 'tekst=' +$.trim(div_inhoud)+ '&pagina=' +pagina+ '&editor=' +$.trim(editor),

或者在 sent_data.php 中，您可以在更新查询中使用 TRIM mysql 函数。