Question

我尝试使用ajax发布数据它不起作用我混淆了如何在不重新加载页面的情况下获取数据，任何人都可以帮助我吗？

路线：

Route::get('comments', 'CafetawaController@getComments');
Route::post('comments', 'CafetawaController@postComments');

控制器：

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>

的Ajax：

    $('#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
（匿名函数）@ wifi-mengubah-segalanya-celebratemoment：425
n.event.dispatch @ jquery.min.js：3
r.handle @jquery.min.js：3

Here is my console screenshot

任何人都可以提供帮助吗？

Answer 1

这里的问题

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

您已将$('#bodyComment').val();指定为body，但在ajax通话中您试图传递

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

因此，jquery将尝试查找导致bodyComment的变量"Uncaught RangeError: Maximum call stack size exceeded。 Jan在评论中也提到了这一点。

因此，您应将ajax调用更改为

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

提示：

您应在控制台或浏览器的网络标签中查看此内容

如何使用laravel ajax发布并获得评论而无需重新加载页面？

1 个答案: