一尘不染

如何保存和检索可编辑内容的数据

ajax

我希望我网站的管理员能够更改某些页面的文本。使用满足感对于我来说是完美的。
问题是我只知道如何用PHP编程。我已经在互联网上搜索了数小时,试图使它对我有用,但是我只是不理解用于存储数据以使其有效的编程语言。

这就是我希望的工作方式:
1.管理员点击“编辑”按钮
2. div可编辑。
3.当管理员准备好编辑时,他点击“保存”按钮
。4.数据被保存到文件或数据库中(不知道什么是最好的选择)。
5.打开页面后,将显示编辑的内容。

这就是我现在所拥有的:

<div class='big_wrapper' contenteditable>
  PAGE CONTENT
</div>

我知道当管理员点击“ edit”时如何将div转换为contenteditable div来制作零件。
我的问题是我真的不知道如何保存编辑后的数据。
我也不知道从文件中检索数据是否困难,这取决于如何保存数据。如果将其保存到数据库中,则检索它不会有任何问题,但是我不知道这是否可行,这是否是最佳选择。

谢谢你的帮助,

萨穆尔

编辑:

@gibberish,非常感谢您的超快速回复!
我试图使其正常工作,但目前尚无法正常工作。我不知道我在做什么错。

这是我的代码:
over_ons.php

<div class='big_wrapper' contenteditable>
  PAGE CONTENT
</div>

<input type='button' value='Send Data' id='mybutt'>

<script type="text/javascript">
  $('#mybutt').click(function(){
  var myTxt = $('.big_wrapper').html();
  $.ajax({
      type: 'post',
      url:  'sent_data.php',
      data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
  });

});
</script>

sent_data.php

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

$tekst=$_POST['myTxt'];

$query="UPDATE paginas SET inhoud='" .$tekst. "' WHERE id='1'";

mysql_query($query);
?>

再次感谢您的大力帮助!
您还可以帮助我仅在用户单击按钮时使div可编辑吗?

解决方案

我花了2个多星期才终于使一切顺利。我必须学习javascript,jQuery和Ajax。但是现在它可以完美地工作了。我什至还为幻想添加了一些额外功能:)
如果有人想做同样的事情,我想分享一下我是如何做到的。

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' id='editable'>
    <?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
        echo $inhoud;
    ?>
</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

//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
$('#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=$('#editable'), 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 = $("#editable").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=$('#editable'), 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>');
                    });
    }
});

最后,
send_data.php

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

//Look up witch 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);

$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>";
    }
?>

阅读 187

收藏
2020-07-26

共1个答案

一尘不染

使用客户端语言(例如JavaScript(或最好的jQuery))来管理是否可以编辑输入框。

使用AJAX捕获字段数据并将其发射到PHP文件,该文件会将数据粘贴在数据库中。

这是一个使用jQuery管理启用/禁用输入字段的非常简化的示例:

jsFiddle演示

$('.editable').prop('disabled',true);

$('.editbutt').click(function(){
    var num = $(this).attr('id').split('-')[1];
    $('#edit-'+num).prop('disabled',false).focus();
});

$('.editable').blur(function(){
    var myTxt = $(this).val();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
    });
});

PHP文件:some_php_file.php

<?php 
    $myVar = $_POST['varname'];
    $secondVar = $_POST['anothervar'];
    //Now, do what you want with the data in the vars

使用AJAX非常容易。我给出了一个非常简短的示例,说明它的外观。不要在HTML或jQuery中查找moreTxt变量-
我添加了它,以显示如何向ajax添加第二个数据变量。

以下是一些基本示例,可帮助您快速掌握Ajax:

使用jQuery的AJAX请求回调


学习jQuery或AJAX并非没有捷径。 阅读示例并进行实验。

您可以在此处找到一些出色的免费jQuery教程:

http://thenewboston.com

http://phpacademy.org


更新编辑:

回应您的评论查询:

要将数据从DIV发送到PHP文件,首先需要一个触发代码的 事件
。如您提到的,在输入字段上,这可能是blur()事件,当您离开字段时触发。在上<select>,可以是change()事件,该事件在您选择一个选项时触发。但是在DIV上…好吧,用户无法与div交互,对吗?触发器必须是用户
执行的操作 ,例如单击按钮。

因此,用户单击一个按钮-
您可以使用.html()命令获取DIV的内容。(在输入框和选择控件上,您将使用.val(),但在DIV和表单元格上,您必须使用.html()。代码如下所示:

单击按钮后如何发送DIV内容:

HTML:

<div class='big_wrapper' contenteditable>
    PAGE CONTENT
</div>
<input id="mybutt" type="button" value="Send Data" />

jQuery的:

$('#mybutt').click(function(){
    var myTxt = $('.big_wrapper').html();
    $.ajax({
        type: 'post',
        url:  'some_php_file.php',
        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
    });

});
2020-07-26