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

你的控制器在逻辑之后进行重定向，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回调可以抓取它并执行某些操作（更新星号）。

Answer 2

@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>

毕竟这只是一种方法，你可以尝试不同的方法，以满足你的需要。

Cheerz。

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

2 个答案: