我相信我已经正确设置了数据库,因为网页没有返回该错误,但我不知道如何在数据库中创建表,因此此代码可以保存到数据库然后检索它。
<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>