使用 AJAX 将项目添加到 Laravel 中的数据库，然后显示项目

Question

经过数小时的谷歌搜索，我似乎无法找到这个看似简单的问题的答案。我无法在不刷新页面的情况下将数据添加到数据库并显示该数据。我的目标是能够从表单创建一个对象以上传到数据库，然后显示数据库中的所有项目（无需刷新页面）。我曾多次尝试让 AJAX 工作，但我似乎做不到。该应用程序通过向学生添加星星来工作，所以基本上我希望能够在不重新加载页面的情况下更新学生的星星计数。但是现在我什至不能console.log提交的表单数据。我的控制器代码是这样的：

    public function addStar(){

    $id = Input::get('id');
    $user_id = Input::get('user_id');

    if(Auth::user()->id == $user_id){

        Student::addStar($id);

    }

    return Redirect::back();

}

还有我的表格：

             {{Form::open(array('action'=>'HomeController@addStar','id'=>'addStar','method'=>'post'))}}
        {{ Form::hidden('id', $student->id, array('id'=>'id_value')) }}
        {{ Form::hidden('user_id', $student->user_id, array('id'=>'user_id_value'))}}
        {{ Form::submit('+')}}
        {{ Form::close() }}

还有我在 AJAX 上的极差尝试：

$('#addStar').on('submit',function(e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        cache: false,
        dataType: 'JSON',
        url: '/addstar',
        data: $('#addStar').serialize(),
        success: function(data) {

            console.log(data);
        },

    });
    return false;
});

如果我满足于允许页面重新加载，代码可以正常工作，但我不希望这样。所以本质上，我的问题是，如何在不重新加载页面的情况下将数据添加到数据库并显示它？非常感谢！

Answer 1

@codeforfood，

如果您想获取响应并立即在页面中显示而无需重新加载，那么您可以返回 JSON 响应，然后在客户端 Javascript 处理该响应以获取成功或失败条件。

如果你愿意，可以尝试这样的事情： 在控制器中的 addStar() 方法响应：

$data = ['star_count' => 'COUNT OF STARS'];
return json_encode($data);   

在特定 Star Div 的视图中：

    <script>
        $('#stardiv).on('submit', function (e) {
            $.ajax({
                type: 'POST',
                url: "{{URL::to('xxxxx')}}",
                data: $(this).serialize(),
                dataType: "JSON",
                success: function (data) {
Handle the success condition here, you can access the response data through data['star_count']
                },
                error: function (data) {
Handle the error condition here, may be show an alert of failure
                }
            });
            return false;
        });
    </script>

毕竟这只是一种方法，您可以尝试其他适合您需要的方法。

干杯。

Answer 2

您的控制器在逻辑之后执行重定向，ajax 将无法对响应执行任何操作。在添加开始后返回新的星级评分。

public function addStar(){

    $id      = Input::get('id');
    $user_id = Input::get('user_id');

    if(Auth::user()->id == $user_id){

        Student::addStar($id);

    }

    $star_count = //get new star count;

    return Response::json(['star_count' => $star_count]);
}

由于控制器现在返回一个 json 响应，$.ajax 上的 success 回调可以抓住它并做一些事情（更新星数）。