php - Laravel 5 中的 ajax 请求表单重定向至路由

Question

我正在尝试向“点赞”按钮添加 ajax 功能。

一切正常，除了在单击“like”按钮后我被重定向到包含 json 数据的页面。

我正在使用 e.preventDefault()，但它仍在重定向我。

如果我使用 on('click')，即使我包含了带有 token 的隐藏输入，我也会在控制台日志中收到 TokenMismatch 错误。

jquery.min.js:4 POST http://localhost/socialnet/public/likeStatus 500 (Internal Server Error)

如果我使用 on('submit') 数据会通过，但我会被重定向到带有 json 响应的页面。

这是在我的 Controller 中FeedController@likeStatus()

public function likeStatus() {

    if (Input::has('like_status')) {
        $status = Input::get('like_status');
        $selectedStatus = Status::find($status);

        $selectedStatus->likes()->create([
            'user_id' => Auth::user()->id,
            'status_id' => $status
        ]);

        $response = array(
            'status' => 'success',
            'msg' => 'You have liked this status',
        );

        return Response::json($response);
    }
}

景色

{!! Form::open(['action' => 'FeedController@likeStatus', 'id' => 'like_form']) !!}
    {!! Form::hidden('like_status', $status->id) !!}
    {!! Form::hidden('user_id', Auth::user()->id) !!}
    <button type="submit" name="likeStatus" class="btn btn-info btn-xs" id="like-status">
          <i class="fa fa-thumbs-up"></i> Like ({{ $likes_count }})
    </button>
{!! Form::close() !!}

Javascript

$('#like-status').on('click', function(e){
    e.preventDefault();

    var status_id = $('input[name=like_status]').val();
    var user_id = $('input[name=user_id]').val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').val()
        }
    });

    $.ajax({
        url: 'http://localhost/socialnet/public/likeStatus',
        method: 'post',
        data: {status_id: status_id, user_id: user_id},
        success: function( data ) {
            console.log(data.msg);
        }
    });
});

编辑:我刚刚将 CSRF token 添加到变量中并将其添加到数据

    var status_id = $('input[name=like_status]').val();
    var user_id = $('input[name=user_id]').val();
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    $.ajax({
        url: 'http://localhost/socialnet/public/likeStatus',
        method: 'post',
        data: {status_id: status_id, user_id: user_id, _token: CSRF_TOKEN},
        success: function( data ) {
            console.log(data.msg);
        }
    });

这会在“网络”选项卡中显示状态代码:200，但在控制台中显示未定义，并且没有数据通过。

编辑2:正在发生一些非常奇怪的事情。当我尝试喜欢最新状态时，我在控制台中收到 undefined，但什么也没有发生。但当我喜欢以前的(旧)状态时它会起作用，但是当我单击“like”按钮时，我会被重定向到 json 数据页面并且数据会通过。

我做错了什么？

Answer 1

这意味着你的ajax调用根本不起作用，首先确保你的浏览器中启用了Javascript并且包含jquery，如果是的话，然后尝试更改按钮类型提交到按钮，如果按钮是动态生成的，你可以也尝试一下 live 功能

 $('#like-button').live("click",function(){   })

尝试使用 jquery 提交调用的警报进行调试，以确保函数被调用