2017-07-13 20 views
0

我在laravel上创建了一个博客,到目前为止,我已经为包含标题和内容的帖子成功制作了js代码。但我在为标签写js函数时遇到了一些麻烦。创建用于提交按钮的JavaScript函数以返回数据

我想为标签做同样的事情,但我在尝试的所有事情上都遇到了错误。

<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' => '[email protected]']); 
Route::post('/postData', ['uses' => '[email protected]']); 

这里是PostController中和TagController小号tore方法:

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(); 
} 
+1

你得到什么错误? –

+0

我将$ .post更改为$ .tag,它表示$ .tag不是函数。我还将标题更改为标签的名称。即使我这样做,它仍然不会返回我的phpmyadmin上的任何数据,就像它对帖子所做的一样。 – livia

+0

是因为jquery不提供名为'$ .tag'的方法?我很困惑,让你感到困惑。 – Xatenev

回答

1

你的JS代码有错误。您正在选择一个不存在的ID。您需要选择已更改标签的内容,并将其作为数据['名称']发送。试试下面的代码:

<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> 
+0

我也尝试过,但它仍然不起作用 – livia

+0

你可以添加更多的细节到您的文章?错误消息等,以便我们可以排除故障? –

+0

我正在监视控制台上的错误。我相信这是VAR数据 POST http://blog.app/postData 500(内部服务器错误) 发送@ jquery.min.js:4个 AJAX @ jquery.min.js:4 R(匿名函数)@ jquery.min.js:4 (匿名)@ tag:29 dispatch @ jquery.min.js:3 q.handle @ jquery.min.js:3 – livia