使用Ajax提交大量数据时出现302错误的解决咨询

问题描述 #

使用以下JavaScript代码通过Ajax提交表单数据，提交10条左右数据时正常，但提交400行数据时出现302重定向错误，请求被拦截，无法完成数据提交。

提交代码 #

$('#update_reading').click(function(e) { 
    e.preventDefault();
    var values = [];
    $('table tr').each((_, row) => {
        var value = {};
        $(row).find(":input[name='mono_cmr[]']").each((__, e) =>
            value['mono_cmr'] = $(e).val()
        );
        $(row).find(":input[name='mono_pmr[]']").each((__, e) =>
            value['mono_pmr'] = $(e).val()
        );
        $(row).find(":input[name='color_cmr[]']").each((__, e) =>
            value['color_cmr'] = $(e).val()
        );
        $(row).find(":input[name='color_pmr[]']").each((__, e) =>
            value['color_pmr'] = $(e).val()
        );
        $(row).find(":input[name='scn_cmr[]']").each((__, e) =>
            value['scn_cmr'] = $(e).val()
        );
        $(row).find(":input[name='scn_pmr[]']").each((__, e) =>
            value['scn_pmr'] = $(e).val()
        );
        $(row).find(":input[name='asset_id[]']").each((__, e) =>
            value['asset_id'] = $(e).val()
        );

        values.push(value);
    });
    // console.log(values)
    values.shift();
    values.shift();
    values.shift();
    values.shift();
    var billing_date = $('#billing_date').val();         
    $("#overlay").fadeIn(300); 

    $.ajax({ 
        type: "POST", 
        dataType: "json", 
        url: 'billing/post_reading', 
        data: {'values': values,'billing_date': billing_date,"_token":"{{ csrf_token() }}"},
        success: function(data){ 
            // var msg =JSON.parse(data);
        } 
    }).done(function() {
        setTimeout(function(){
            $("#overlay").fadeOut(300);
            alert("Reading Updated Successfully"); 
        }, 500);
    }); 
}); 

解决方法 #

1. 调整服务器请求大小限制 #

400条数据的总大小可能超出了PHP或Web服务器的默认限制：

• 修改PHP配置（php.ini）：

  post_max_size = 64M  # 可根据实际需求调整为128M或更大
  upload_max_filesize = 64M
  

• 如果使用Nginx，修改nginx.conf或站点配置文件：

  client_max_body_size 64M;
  

• 修改后重启PHP-FPM和Web服务器生效。

2. 确保CSRF令牌有效 #

大量数据提交时请求耗时较长，可能导致会话过期、令牌失效：

• 不要直接使用页面加载时生成的{{ csrf_token() }}，改成从页面meta标签动态获取最新令牌：

  // 先在页面<head>中添加<meta name="csrf-token" content="{{ csrf_token() }}">
  var token = $('meta[name="csrf-token"]').attr('content');
  // 然后在ajax的data参数中用token变量替换原有的"_token":"{{ csrf_token() }}"
  

• 可延长Laravel会话超时时间，修改config/session.php里的lifetime参数：

  'lifetime' => env('SESSION_LIFETIME', 120), // 单位：分钟
  

3. 分批提交数据 #

一次性提交400条数据压力过大，改成分批提交降低单次请求负载：

$('#update_reading').click(function(e) { 
    e.preventDefault();
    var values = [];
    $('table tr').each((_, row) => {
        var value = {};
        $(row).find(":input[name='mono_cmr[]']").each((__, e) =>
            value['mono_cmr'] = $(e).val()
        );
        $(row).find(":input[name='mono_pmr[]']").each((__, e) =>
            value['mono_pmr'] = $(e).val()
        );
        $(row).find(":input[name='color_cmr[]']").each((__, e) =>
            value['color_cmr'] = $(e).val()
        );
        $(row).find(":input[name='color_pmr[]']").each((__, e) =>
            value['color_pmr'] = $(e).val()
        );
        $(row).find(":input[name='scn_cmr[]']").each((__, e) =>
            value['scn_cmr'] = $(e).val()
        );
        $(row).find(":input[name='scn_pmr[]']").each((__, e) =>
            value['scn_pmr'] = $(e).val()
        );
        $(row).find(":input[name='asset_id[]']").each((__, e) =>
            value['asset_id'] = $(e).val()
        );

        values.push(value);
    });
    values.shift();
    values.shift();
    values.shift();
    values.shift();
    var billing_date = $('#billing_date').val();         
    $("#overlay").fadeIn(300); 

    var token = $('meta[name="csrf-token"]').attr('content');
    const batchSize = 50; // 每次提交50条，可根据服务器情况调整
    const batches = [];

    // 将数据分割为多个批次
    for (let i = 0; i < values.length; i += batchSize) {
        batches.push(values.slice(i, i + batchSize));
    }

    // 依次提交每个批次
    let submitPromise = $.when();
    batches.forEach(batch => {
        submitPromise = submitPromise.then(() => {
            return $.ajax({
                type: "POST",
                dataType: "json",
                url: 'billing/post_reading',
                data: {'values': batch, 'billing_date': billing_date, "_token": token}
            });
        });
    });

    submitPromise.done(() => {
        setTimeout(() => {
            $("#overlay").fadeOut(300);
            alert("所有Reading更新成功");
        }, 500);
    }).fail(() => {
        $("#overlay").fadeOut(300);
        alert("部分数据提交失败，请重试");
    });
});

4. 检查Laravel路由与中间件 #

• 确认billing/post_reading路由在web中间件组中（需CSRF验证），且路由逻辑无错误重定向；
• 检查是否有throttle速率限制中间件，大量请求可能触发限制，可调整参数：

  Route::post('billing/post_reading', [BillingController::class, 'postReading'])->middleware('throttle:100,1');
  

内容的提问来源于stack exchange，提问作者Mannu254