Jef*_*ntz 5 php mysql ajax json 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”，在羽毛笔讨论字段中输入“cute”，则 php 文件中的 echo 语句会给出以下结果：
标题是丹妮丝
讨论内容为 {"ops":[{"insert":"Cute\n"}]}
数据库中未存储任何内容。
我将不胜感激并提供帮助或评论。谢谢
小智 5
如果您只需要羽毛笔编辑器中的文本值，请使用 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 脚本中。
进一步清理后，将数据插入数据库（HTML 或 TEXT）。希望能帮助到你 ：-）
请尝试以下操作，可能有助于解决问题：
var quill = new Quill('#comment'); var cc = quill.container.firstChild.innerHTML;
现在 cc 将保存您的 div 元素的数据。可以将其插入到数据库中。这只是示例。如果对您有帮助，您可以使用。
| 归档时间： |
|
| 查看次数： |
17556 次 |
| 最近记录： |