我有一个非常简单的表单，其中包含一个标题字段，并使用quill进入讨论。我已经尝试了我能想到的一切，但仍然无法用信息填充mysql数据库。我想我已经接近了，但还没到那里。我认为问题在于我使用json和ajax。
这是我创建表单的html文件：
<!DOCTYPE>
<html>
<head>
<title>Discussions</title>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
<link href = "../css/discussionsEditor.css" rel = "stylesheet">
<script src="https://cdn.quilljs.com/1.2.2/quill.js"></script>
</head>
<body>
<div id="form-container" class="container">
<form id="discussionForm" method = "post" action ="discussionsEditor.php" role="form">
<div class="row">
<div class="col-xs-8">
<div class="form-group">
<input class="form-control" name="title" type="text" placeholder="Title">
</div>
</div>
</div>
<div class="row form-group">
<input name="discussionContent" type="hidden">
<div id="editor-container">
</div>
</div>
<div class="row">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
<script>
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
['bold', 'italic'],
['link', 'blockquote', 'code-block', 'image'],
[{ list: 'ordered' }, { list: 'bullet' }]
]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});
</script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../js/discussionsEditor.js"></script>
</body>
</html>
这是我的javascript文件，我尝试使用json和ajax来传输数据。
var form = document.querySelector('form');
form.onsubmit = function() {
// Populate hidden form on submit
var discussionContent = document.querySelector('input[name=discussionContent]');
discussionContent.value = JSON.stringify(quill.getContents());
var url ="discussionsEditor.php";
var data = stringify(quill.getContents());
alert( "the data is " + data);
$.ajax({
type: "POST",
url : url,
data : discussionContent,
success: function ()
{
alert("Successfully sent to database");
},
error: function()
{
alert("Could not send to database");
}
});
return false;
};
最后这是我的php文件
<?php
try
{
$pdo = new PDO('mysql:host=localhost; dbname=mydb', "user", "password");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$pdo->exec('SET NAMES "utf8"');
}
catch (PDOException $e)
{
$output = 'Unable to connect to the database server:' . $e->getMessage();
include '../output.html.php';
exit();
}
$title = $_POST['title'];
echo "<br />";
echo "the title is " . $title;
$discussionContent = $_POST['discussionContent'];
echo "<br />";
echo "the discussion content is ". $discussionContent;
$sql = 'INSERT INTO Discussions(Title, DiscussionContent)
Values(:Title, :DiscussionContent)';
$statement = $pdo -> prepare($sql);
$statement -> execute(array(':Title' => $title, ':DiscussionContent' => $discussionContent));
?>
如果我在标题字段中添加'Denise'并在quill讨论字段中添加'cute'，则php文件中的echo语句会给出以下结果：
标题是丹尼斯
讨论内容为{“ops”：[{“insert”：“Cute \ n”}]}
数据库中没有存储任何内容。
我将不胜感激，帮助或评论。谢谢
请尝试以下方法。它可能有助于解决问题：
var quill = new Quill（'＃comment'）; var cc = quill.container.firstChild.innerHTML;
现在cc将保存你的div元素的数据。可以插入到DB中。这只是一个例子。你可以使用它，如果它可以帮助你。
如果你只需要你的quill编辑器中的Text值，请使用getText（）方法，如下所示：
var quillText = quill.getText();
如果您计划在数据库使用中存储HTML数据
var quillHtml = quill.root.innerHTML.trim();
将值传递给您的ajax数据，如下所示：
$.ajax({
type: "POST",
url : url,
data: {editorContent : quillText },
success: function (data,status, xhr)
{
if(xhr.status == 200) {
alert("Successfully sent to database");
}
},error: function() {
alert("Could not send to database");
}
});
发布为“editorContent”的原因是您可以简单地获取发布的值
$_POST['editorContent']
在你的PHP脚本中。
进一步清理后，将数据插入DB（HTML或TEXT）。希望能帮助到你 ：-）