如何使用laravel ajax發佈和獲得評論而無需重新加載頁面？

我嘗試使用Ajax發佈數據，它不工作，我很混淆如何獲取數據而無需重新加載頁面，任何人都可以幫助我？如何使用laravel ajax發佈和獲得評論而無需重新加載頁面？

路線：

Route::get('comments', '[email protected]'); 
Route::post('comments', '[email protected]');

控制器：

public function postComments(Request $request) 
{ 
    if($request->ajax()){ 
     $comment = new Comment(); 
     $comment->userid = Input::get('userid'); 
     $comment->mediaid = Input::get('mediaid'); 
     $comment->body = Input::get('bodyComment'); 
     $comment->date = Carbon::now(); 
     $comment->type = "media"; 
     $comment->save(); 

     $response = array(
      'status' => 'success', 
      'msg' => 'Setting created successfully', 
     ); 
     return Response::json($response); 
     return 'yes'; 
    }else{ 
     return 'no'; 
    } 
}

查看：

{!! Form::open(array('url'=>'comments','method'=>'POST', 'id'=>'frmComments')) !!} 
    <table width="100%"> 
     <tbody> 
     <tr> 
      <td valign="top" style="padding-right:10px"> 
       {!! Html::image('images/no-profile.png', null, array('class' => 'img-responsive img-rounded media-preview')) !!} 
      </td> 
      <td valign="top" width="100%"> 
       {!! Form::hidden('mediaid', $list->id, array('id' => 'mediaid')) !!} 
       {!! Form::hidden('userid', $list->userid, array('id' => 'userid')) !!} 
       {!! Form::textarea('bodyComment', null, array('class'=>'form-control elastic', 'id'=>'bodyComment', 'rows'=>'5', 'placeholder' => 'Comments here...')) !!} 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2" align="right" style="padding-top:10px"> 
       {!! Form::submit('Submit', array('name'=>'submit', 'class'=>'btn btn-primary', 'id' => 'btnComments')) !!} 
      </td> 
     </tr> 
     </tbody> 
    </table> 
{!! Form::close() !!}

這裏是我的腳本：

$('#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("<div>"+msg+"</div>"); 
      } 
     }); 
    });

當我點擊提交按鈕，我得到了「未捕獲的RangeError：最大調用堆棧大小超出」

我還是不明白，Ajax的工作原理如何，請大家幫忙

========== ================================================== ===============

更新：

謝謝您的回答，但我得到了在JavaScript控制檯中的另一個錯誤，當我提交評論：

頭：

<meta name="_token" content="{!! csrf_token() !!}">

身體：

<script type="text/javascript"> 
$.ajaxSetup({ 
    headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') } 
}); 
</script>

阿賈克斯：

$('#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("<div>"+msg+"</div>"); 
      } 
     }); 
    });

POST http://cafetawa01.app/comments 500（內部服務器錯誤）
k.cors.a.crossDomain.send @ jquery.min.js ：4
n.extend.ajax @ jquery.min.js：4
（anonymous function）@ wifi-mengubah-segalan雅celebratemoment：425
n.event.dispatch @ jquery.min.js：3
r.handle @ jquery.min.js：3

Here is my console screenshot

任何人都可以幫忙嗎？

來源

2015-11-23 Reint

網絡選項卡中勾選此做AJAX調用之前，你能提醒'bodyComment'，'mediaid'和'ùserid'的價值嗎？ –

你的腳本中有一個錯字'data：{body：bodyComment，mediaid：mediaid，userid：userid}'應該是'data：{body：body，mediaid：mediaid，userid：userid}'。 –

'{!!'中的第一個參數Form :: hidden（'mediaid'，$ list-> id，array（'id'=>'mediaid'））!!}'是name屬性。因此，在jQuery中，您應該使用以下命令獲取此輸入的值：'var mediaid = $（'input [name = mediaid]'）。val（）;' –

var body = $('#bodyComment').val(); 
       ^^^^^^^^^^^^

您分配了$('#bodyComment').val();如body但在阿賈克斯這裏的問題叫你試圖傳遞

data: {body:bodyComment, mediaid:mediaid, userid:userid} 
      ^^^^^^^^^^^

所以，jQuery將嘗試尋找變量bodyComment這是不可用的，導致"Uncaught RangeError: Maximum call stack size exceeded。簡也在評論中提到了這一點。

所以，你要你的Ajax調用變成

data: {body:body, mediaid:mediaid, userid:userid}

提示：

您應在控制檯或在您的瀏覽器

來源

2015-11-23 14:32:54

如何使用laravel ajax發佈和獲得評論而無需重新加載頁面？

回答

相關問題