javascript - MySQL数据库中字符串值累积空格

Question

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

我做了很多故障排除，但我就是无法弄清楚是什么导致添加了空格。这种情况并不总是发生，因此很难排除故障。

这是我的代码:

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

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

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

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

标记中，可能如下所示:

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

另一个解决方案是在插入数据库之前 trim 文本。您可以在 javascript post 阶段或在插入 mysql 数据库之前执行此操作。

在 jQuery(您正在使用的)中，您可以实现此:

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

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