Php 在表单中使用Quill并将数据传输到mysql数据库_Php_Mysql_Json_Ajax_Quill

Php 在表单中使用Quill并将数据传输到mysql数据库

php mysql json ajax

Php 在表单中使用Quill并将数据传输到mysql数据库,php,mysql,json,ajax,quill,Php,Mysql,Json,Ajax,Quill,我有一个非常简单的表单，它有一个标题字段，并使用羽毛笔进入讨论。我已经尝试了我能想到的一切，但仍然无法用这些信息填充mysql数据库。我想我已经接近了，但还没有完全达到。我认为问题在于我对json和ajax的使用以下是创建表单的html文件： <!DOCTYPE> <html> <head> <title>Discussions</title> <meta charset="UTF-8"&

我有一个非常简单的表单，它有一个标题字段，并使用羽毛笔进入讨论。我已经尝试了我能想到的一切，但仍然无法用这些信息填充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>

最后是我的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));

?>

请尝试以下操作。这可能有助于解决此问题：
注释是编辑器id。
var quill=新的quill（“#注释”）；
var cc=quill.container.firstChild.innerHTML
现在cc将保存div元素的数据。可以将其插入DB。这只是一个示例。如果它对您有帮助，您可以使用。
如果您只需要像下面这样的quill编辑器中的文本值，请使用getText（）方法：
var quillText = quill.getText();

如果您计划在DB中存储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或文本）。
希望有帮助：-）抛出任何db错误？您解决了吗？
$_POST['editorContent']