为 return 数据的提交按钮创建 javascript 函数

Question

我正在 laravel 上创建博客，到目前为止，我已经为包含标题和内容的帖子创建了成功的 js 代码。但是我在为标签编写 js 函数时遇到了一些问题。

我想对标签做同样的事情，但我尝试的每件事都出错了。

    <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=fg5tc8gb4rtw6p9n3njd2hi4965rketxda84pbcfs09hb5x2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: '.myeditablediv',
            plugins: 'code , save, autoresize , textcolor colorpicker , emoticons, textpattern , wordcount',
            toolbar: 'save , restoredraft , forecolor backcolor, emoticons',
            save_onsavecallback: function () {
                var content = tinymce.activeEditor.getContent();
            console.log(content);
            }
        });

        $(document).on('click', '#SubmitBtn', function () {
            var content = tinymce.activeEditor.getContent();

            var data = {
                'title': $('#title').val(),
                'content': content,
                '_token': '{{csrf_token()}}'
            };
            $.post('/postData', data, function () {
                  console.log(data);
            });
        });

    </script>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1>Create the title</h1>

        <form>

            {{csrf_field()}}

            <label for="title">Click here to edit the title of your post!</label>
            <input type="text" name="title" id="title"/>

            <h1>Create the content</h1>

            <div class="myeditablediv">Click here to edit the content of your post!</div>

        </form>

        <input type="button" name="Submit" id="SubmitBtn" value="Submit"/>
</body>
</html>

<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=fg5tc8gb4rtw6p9n3njd2hi4965rketxda84pbcfs09hb5x2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script>
<script type="text/javascript">
        tinymce.init({
            selector: '.myeditabletag',  // change this value according to your HTML
            menu: {
                view: {title: 'Edit', items: 'cut, copy, paste'}
            },
            save_onsavecallback: function () {
                var content = tinymce.activeEditor.getContent();
                console.log(content);
            }
        });

        $(document).on('click', '#SubmitBtn', function () {
            var name = tinymce.activeEditor.getContent();

            var data = {
                'name': name,
                '_token': '{{csrf_token()}}'
            };

            $.post('/postTags', data, function () {
                console.log(data);
            });
        });

    </script>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

    <h1>Create a new Tag</h1>

        <form>
        {{csrf_field()}}

            {{--<input type="text" name="name" id="name"/>--}}

            <div class="myeditabletag">Click here to edit the name of your tag!</div>

        </form>
        <input type="button" name="Submit" id="SubmitBtn" value="Submit"/>
</body>
</html>

这是标签和帖子的 /postData 路径：

Route::post('/postTags', ['uses' => 'TagController@store']);
Route::post('/postData', ['uses' => 'PostController@store']);

这里是 PostController 和 TagController 存储方法：

public function store(Request $request)
{
    $post = new Post;
    $post->title = $request['title'];
    $post->content = $request['content'];
    $post->save();
}

public function store(Request $request)
{
    $tag = new Tag;
    $tag->name = $request['name'];
    $tag->save();
}

Answer 1

你的JS代码有误。您正在 select 创建一个不存在的 ID。您需要 select 更改标签的内容，并将其作为数据 ['name'] 发送。试试下面的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script>

<script type="text/javascript">
    tinymce.init({
        selector: '.myeditabletag',  // change this value according to your HTML
        menu: {
            view: {title: 'Edit', items: 'cut, copy, paste'}
        },
        save_onsavecallback: function () {
            var content = tinymce.activeEditor.getContent();
            console.log(content);
        }
    });

    $(document).on('click', '#SubmitBtn', function () {
        var name = tinymce.activeEditor.getContent();

        var data = {
            'name': name,
            '_token': '{{csrf_token()}}'
        };

        console.log(data);
        $.post('/postTags', data, function () {

        });
    });

</script>

为 return 数据的提交按钮创建 javascript 函数

Create javascript function for submit button to return data

javascript

php

tinymce

laravel