表单重定向到 Laravel 5 中 ajax 请求的路由

Question

我正在尝试将 ajax 功能添加到点赞按钮。

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

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

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

jquery.min.js:4 POST http://localhost/socialnet/public/likeStatus 500（内部服务器错误）

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

这是在我的控制器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 令牌添加到变量中并将其添加到 data

    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);
        }
    });

这在“网络”选项卡中提供Status Code: 200，但在控制台中提供undefined，并且没有数据通过。

编辑 2： 发生了一些非常奇怪的事情。当我尝试喜欢最新状态时，我在控制台中收到undefined，但没有任何反应。但是当我喜欢以前的（旧）状态时它可以工作，但是当我单击like按钮时，我会被重定向到 json 数据页面并且数据会通过。

我做错了什么？

Answer 1

看来问题出在你的PHP代码上，它寻找like_status with

if (Input::has('like_status'))

但你发送

{ 
 status_id: status_id, 
 user_id: user_id
}

找不到like_status。 Input::has... 将返回 false。你的代码基本上变成了

public function likeStatus() {

   if (Input::has('like_status')) { //It's always false
    //
   }
  return undefined;
}

Answer 2

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

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

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

Answer 3

需要在成功的AJAX函数中加入这一行

var new_data = JSON.parse(data);

解码来自请求的数据

Answer 4

您应该使用.on('submit')，因为这样您可以正确地阻止表单的默认重定向操作。

就目前而言，您正试图取消#like-status 上的点击事件。

确保您的 jQuery 函数的开头是：

$('#like_form').on('submit', ... 

为了更加安全以确保事件处理程序被正确绑定，您还应该在$(document).ready 内绑定，如下所示：

$(document).ready( function () {

    $('#like_form').on('submit', ... 

}