Question

首先，我获取了数据库中的所有记录，并将其转换为json，然后使用array_chunk将其每批除以10条记录。

public function fareTracker(Request $request)
    {
        // get the database records off all faretracker applications
        $faretrackers = FareTracker::where('is_booked', 0)->get();
        // decode the protected object
        $ftr = json_decode($faretrackers, TRUE);
        $per_batch = array_chunk($ftr , 10);
        return response()->json( ['rec' => $per_batch] );
    }

这是我的JavaScript代码。我只想首先查看该过程中发生的结果。

$(document).on('click', '#fare_tracker', function (){
    var ft_records;
    $.ajax({
        url: "/dashboard/faretracker",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
        },
        type: 'POST',
        async: true,
        success: function (data){

            ft_records = data['rec'];
            // console.log(ft_records);
            for (var i=0; i < ft_records.length; i++) { 
                ft_data = ft_records[i];
                // console.log(ft_data);
                $.ajax({
                    url: "/dashboard/checker",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
                    },
                    type: 'POST',
                    data: {ft_data:ft_data},
                    async: false,
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        //Upload progress
                        xhr.upload.addEventListener("progress", function(evt){
                          if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            //Do something with upload progress
                            console.log(percentComplete);
                          }
                        }, false);
                        return xhr;
                    },
                    success: function (data){
                        // if success do something
                    },

                });
            }

        }
    });
});

但是我无法在控制台上收到任何消息。

我想创建一个在每个记录中都有的进度条。

例如。

---------------------------------：进度条（每批处理10条记录）

每10批中有1批：状态

如何使用XHR使用进度栏修复Ajax请求

0 个答案: