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，没有任何反应。但是当我喜欢上一个（旧）状态时它会起作用，但是当我点击相似按钮时，我会被重定向到json数据页面并且数据会通过。

我做错了什么？

Answer 1

这意味着你的ajax调用完全没有工作，首先要确保你的浏览器启用了Javascript并且包含了jquery，如果是，则尝试更改按钮类型submit to button，如果按钮是动态生成的，你可以尝试实时功能

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

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

Answer 2

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

您正试图取消#like-status上的点击事件。

确保jQuery函数的开头是：

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

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

$(document).ready( function () {

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

}

Answer 3

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

var new_data = JSON.parse(data);

解码您的数据来自请求

Answer 4

问题似乎在于您的PHP代码，它使用

查找like_status

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

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

4 个答案: