如何使用 PHP 将 HTML contenteditable DIV 上的 AJAX 反转到 mySQL DB

Question

下面你会找到一个链接到我的内容编辑 DIV 页面，适当地命名为 ce.php：

我希望从这个问题中找到一个答案，我可以如何使用 Comet/reverse AJAX 在文本更改时立即为所有用户更新页面上的文本。 目前，它保存到我的mySQL数据库中，只有在其他用户刷新页面时才会更新文本。

请不要给出模糊的答案，例如“使用 WebSocket”或“使用 node.js”。 我已经问过一个与此类似的问题并得到了那些答案。 要获得我的投票或检查，我需要完整的答案或教程链接。

我觉得这虽然是一个带有特定代码的特定问题，但如果得到彻底和正确的回答，可以帮助很多有类似问题的人。

这是我的完整代码：

编程语言

<!doctype html>
<head>

<meta charset="utf-8">
<title>Gazpo.com - HTML5 Inline text editing and saving </title>


<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet'      
type='text/css'>
<style>
body {      
font-family: Helvetica,Arial,sans-serif;
color:#333333;
font-size:13px;
}

h1{
font-family: 'Droid Serif', Georgia, Times, serif;
font-size: 28px;        
}

a{
color: #0071D8;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

:focus {
outline: 0;
}

#wrap{
width: 500px;
margin:0 auto;              
overflow:auto;      
}

#content{
background: #f7f7f7;
border-radius: 10px;
}

#editable {     
padding: 10px;      
}

#status{
display:none; 
margin-bottom:15px; 
padding:5px 10px; 
border-radius:5px;
}

.success{
background: #B6D96C;
}

.error{
background: #ffc5cf; 
}

#footer{
margin-top:15px;
text-align: center;
}

#save{  
display: none;
margin: 5px 10px 10px;      
outline: none;
cursor: pointer;    
text-align: center;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
font-weight:700;    
padding: 5px 10px;  
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;
border-radius: 5px; 
color: #606060;
border: solid 1px #b7b7b7;  
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top,  #fff,  #ededed);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',    
endColorstr='#ededed');
}   

#save:hover
{
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',   
endColorstr='#dcdcdc');
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"   
type="text/javascript"></script>
<script>
$(document).ready(function() {

$("#save").click(function (e) {         
    var content = $('#editable').html();    

    $.ajax({
        url: 'save.php',
        type: 'POST',
        data: {
        content: content
        },              
        success:function (data) {

            if (data == '1')
            {
                $("#status")
                .addClass("success")
                .html("Data saved successfully")
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');   
            }
            else
            {
                $("#status")
                .addClass("error")
                .html("An error occured, the data could not be saved")
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');   
            }
        }
    });   

});

$("#editable").click(function (e) {
    $("#save").show();
    e.stopPropagation();
});

$(document).click(function() {
    $("#save").hide();  
});

});
</script>
</head>
<body>
<div id="wrap">
<h1><a href="http://gazpo.com/2011/09/contenteditable/" > HTML5 Inline text editing and   
saving </a></h1>

<h4>The demo to edit the data with html5 <i>contentEditable</i>, and saving the changes   
to database with PHP and jQuery.</h4>

<div id="status"></div>

<div id="content">

<div id="editable" contentEditable="true">
<?php
    //get data from database.
    include("db.php");
    $sql = mysql_query("select text from content where element_id='1'");
    $row = mysql_fetch_array($sql);         
    echo $row['text'];
?>      
</div>  

<button id="save">Save</button>
</div>

<div id="footer">
<a href="http://gazpo.com/">Tutorial by gazpo.com</a> 
</div>
</div>
</body>
</html>

保存.PHP

<?php
include("db.php");
$content = $_POST['content']; //get posted data
$content = mysql_real_escape_string($content);  //escape string 
$sql = "UPDATE content SET text = '$content' WHERE element_id = '1' ";
if (mysql_query($sql))
{
echo 1;
}
?>

数据库文件

<?php
//database connection
mysql_connect("test.test00.com:2400", "first_testuser", "pw") or die(mysql_error());
mysql_select_db("jorgea_testdb") or die(mysql_error());
?>

编辑：仍在寻找答案！ 编辑：删除旧问题并创建新问题以试图找到可以回答这个问题的人....

Answer 1

我只是在 DIV 中使用 onBlur 从数据库刷新。 我需要它，因为我的背景颜色会根据字段的内容而变化。

<DIV id='field_name' 'true'contenteditable='true' onBlur='location.reload(true);'>This text is editable</DIV>

如何使用 PHP 将 HTML contenteditable DIV 上的 AJAX 反转到 mySQL DB

问题描述

1 个解决方案

解决方案1
0 2021-05-18 13:22:59

如何使用 PHP 将 HTML contenteditable DIV 上的 AJAX 反转到 mySQL DB

问题描述

1 个解决方案

解决方案1 0 2021-05-18 13:22:59

解决方案1
0 2021-05-18 13:22:59