title: How to post and get comment using laravel ajax without reload page?
body: <p>I try to post data using ajax it not work and i'm confuse how to get the data without reload the page, could anyone help me?</p>
  
  <p>Route:</p>
  
  <pre><code>Route::get('comments', 'CafetawaController@getComments');
  Route::post('comments', 'CafetawaController@postComments');
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>public function postComments(Request $request)
  {
      if($request-&gt;ajax()){
          $comment = new Comment();
          $comment-&gt;userid =  Input::get( 'userid' );
          $comment-&gt;mediaid = Input::get( 'mediaid' );
          $comment-&gt;body = Input::get( 'bodyComment' );
          $comment-&gt;date = Carbon::now();
          $comment-&gt;type = "media";
          $comment-&gt;save();
  
          $response = array(
              'status' =&gt; 'success',
              'msg' =&gt; 'Setting created successfully',
          );
          return Response::json($response);
          return 'yes';
      }else{
          return 'no';
      }
  }
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>{!! Form::open(array('url'=&gt;'comments','method'=&gt;'POST', 'id'=&gt;'frmComments')) !!}
     &lt;table width="100%"&gt;
        &lt;tbody&gt;
           &lt;tr&gt;
              &lt;td valign="top" style="padding-right:10px"&gt;
                 {!! Html::image('images/no-profile.png', null, array('class' =&gt; 'img-responsive img-rounded media-preview')) !!}
              &lt;/td&gt;
              &lt;td valign="top" width="100%"&gt;
                 {!! Form::hidden('mediaid', $list-&gt;id, array('id' =&gt; 'mediaid')) !!}
                 {!! Form::hidden('userid', $list-&gt;userid, array('id' =&gt; 'userid')) !!}
                 {!! Form::textarea('bodyComment', null, array('class'=&gt;'form-control elastic', 'id'=&gt;'bodyComment', 'rows'=&gt;'5', 'placeholder' =&gt; 'Comments here...')) !!}
              &lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td colspan="2" align="right" style="padding-top:10px"&gt;
                 {!! Form::submit('Submit', array('name'=&gt;'submit', 'class'=&gt;'btn btn-primary', 'id' =&gt; 'btnComments')) !!}
              &lt;/td&gt;
           &lt;/tr&gt;
        &lt;/tbody&gt;
     &lt;/table&gt;
  {!! Form::close() !!}
  </code></pre>
  
  <p>And here is my script:</p>
  
  <pre><code>    $('#frmComments').on('submit', function(e) {
          e.preventDefault();
          var body = $('#bodyComment').val();
          var mediaid = $('#mediaid').val();
          var userid = $('#userid').val();
          $.ajax({
              type: "POST",
              url: 'http://cafetawa01.app/comments',
              data: {body:bodyComment, mediaid:mediaid, userid:userid},
              success: function(msg) {
                  a$("body").append("&lt;div&gt;"+msg+"&lt;/div&gt;");
              }
          });
      });
  </code></pre>
  
  <p>When i click submit button, i got "Uncaught RangeError: Maximum call stack size exceeded"</p>
  
  <p>I still don't understand how ajax works, please help</p>
  
  <p>===========================================================================</p>
  
  <p>Update:</p>
  
  <p>Thanks for your answer, but i got another error in the javascript console when I submit comment:</p>
  
  <p>Head:</p>
  
  <pre><code>&lt;meta name="_token" content="{!! csrf_token() !!}"&gt;
  </code></pre>
  
  <p>Body:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $.ajaxSetup({
     headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Ajax:</p>
  
  <pre><code>    $('#frmComments').on('submit', function(e) {
          e.preventDefault();
          $.ajax({
              type: "POST",
              url: '/comments',
              data: {body:$('#bodyComment').val(), mediaid:$('#mediaid').val(), userid:$('#userid').val()},
              success: function(msg) {
                  $("body").append("&lt;div&gt;"+msg+"&lt;/div&gt;");
              }
          });
      });
  </code></pre>
  
  <p>POST <a href="http://cafetawa01.app/comments" rel="nofollow">http://cafetawa01.app/comments</a> 500 (Internal Server Error)<br>
  k.cors.a.crossDomain.send @ jquery.min.js:4<br>
  n.extend.ajax @ jquery.min.js:4<br>
  (anonymous function) @ wifi-mengubah-segalanya-celebratemoment:425 <br>
  n.event.dispatch @ jquery.min.js:3<br>
  r.handle @ jquery.min.js:3</p>
  
  <p><a href="http://i.stack.imgur.com/xt9Yk.png" rel="nofollow">Here is my console screenshot</a></p>
  
  <p>anyone can help?</p>