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

Posted 2023-03-14

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

【英文标题】：Adding Item to Database in Laravel with AJAX and then showing Item

【发布时间】：2014-10-03 05:27:20

【问题描述】：

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

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

【问题讨论】：

你为什么要重定向？

我想在表单数据提交后重新加载同一个视图——本质上我想重新加载表单所在的视图。

嗯，你应该使用Response::json()返回一个值。如果客户端没有模板，则在服务器上渲染视图，返回视图并使用 jQuery replaceWith 方法将旧视图替换为新视图。

【参考方案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>

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

干杯。

【参考方案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 回调可以抓住它并做一些事情（更新星数）。

【讨论】：

所以没有办法重新加载视图？我希望更新星数，然后在不刷新的情况下更新页面。或者有没有办法将这个 JSON “注入”到我当前的视图中？

@codeforfood 如果你只想更新计数值，重新加载整个视图是多余的，在这种情况下使用 Ajax 没有多大意义。当您使用 jQuery 时，您可以轻松地遍历 DOM 并使用返回的 JSON 更新视图。如果更新后的值从根本上影响了旧数据，您可以在服务器端或客户端重新渲染视图并替换它。