Php 使用AJAX向Laravel中的数据库添加项，然后显示项

经过几个小时的谷歌搜索，我似乎找不到这个看似简单的问题的答案。如果不刷新页面，我无法将数据添加到数据库并显示该数据。我的目标是能够从表单创建一个对象以上载到数据库，然后显示数据库中的所有项目（无需刷新页面）。我曾多次尝试让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;
});

---

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

您的控制器正在执行逻辑后的重定向，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

回调可以获取它并执行一些操作（更新星数）。

@codeforfood

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

如果您愿意，可以尝试以下方法： 在控制器addStar（）方法响应中：

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

在该特定星形分区的视图中：

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

$（'#stardiv）.on（'submit'，函数（e）{
$.ajax({
键入：“POST”，
url:“{{url:：to（'xxxxx'）}}”，
数据：$（this）.serialize（），
数据类型：“JSON”，
成功：功能（数据）{
在这里处理成功条件，您可以通过data['star_count']访问响应数据
},
错误：函数（数据）{
在此处处理错误情况，可能会显示故障警报
}
});
返回false；
});

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

---

Cheerz.

为什么要重定向？我想在提交表单数据后重新加载相同的视图，本质上我想重新加载表单所在的视图。您应该使用

Response:：json（）

返回一个值。如果客户端没有模板，请在服务器上渲染视图，返回视图并使用jQuery

replaceWith

方法将旧视图替换为新视图。因此无法重新加载视图？我希望更新星数，然后在不刷新的情况下更新页面。或者有没有办法将这个JSON“注入”到我的当前视图中？@codeforfood如果你只想更新计数值，那么重新加载整个视图就太过分了，在这种情况下，使用Ajax没有多大意义。在使用jQuery时，您可以轻松地遍历DOM并使用返回的JSON更新视图。如果更新的值从根本上影响旧数据，则可以在服务器或客户端重新渲染视图并替换它。