ajax post 提交大量数据

秒速五厘米 2022-06-12 09:45 402阅读 0赞

在做个彩票项目的时候，有个业务是需要一个大型的数组通过ajax把一个大型数组传到后台，网上搜了一大轮，发觉说的都是说这种方式使用ajax不符合业务要求。  
或者问非所答，很少有亲自测试的。

### 这里做了个10W长度的数据通过post请求传到后台。 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
        <title>大量数据测试</title>
    </head>
    <body>
    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript"> ;(function(){ function fun(){ var arr=new Array(); for(var a=0;a<10;a++){ for(var b=0;b<10;b++){ for(var c=0;c<10;c++){ for(var d=0;d<10;d++){ for(var e=0;e<10;e++){ arr.push(a.toString()+b.toString()+c.toString()+d.toString()+e.toString()); } } } } } $.ajax({ url:"post.php", type:"post", data:{big:arr}, success:function(data){ console.log(data); } }) } function test(func){ var start = new Date().getTime();//起始时间 func();//执行待测函数 var end = new Date().getTime();//接受时间 return (end - start)+"ms";//返回函数执行需要时间 } console.log("start:开始计时"); var time = test(fun); console.log(time); console.log("end:开始计时"); })(); </script>
    
    </body>
    </html>

后台只是简单的返回数据，并没有作数据处理

<?php $big=$_POST['big']; echo "success"; ?>

#### 得出的结果是需要416ms—422ms才能把数据作异步返回. ####

![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
（提醒下，如果用的是xampp需要配置下，max\_input\_vars ）  
![这里写图片描述][SouthEast 2]

*  很明显，我这里只是0-10随机生成的5位数，但是数组长度却达到了10W，如果传到后台的方式不是以数据形式而是以字符串或者其他形式会不会减轻了传递的压力呢？
 *  毕竟转成字符串或者其他格式，传递到后台也可以通过其他方式转换成数组形式。

说干就干，

主要是利用JSON.stringify()

这样就将数组转换成字符串了。  
而且大幅提高了速度：  
![这里写图片描述][SouthEast 3]  
![这里写图片描述][SouthEast 4]

#### 提交到后台的数据，只需要处理一下分解下字符串，就可以使用了 ####

$hello = explode(',',$_POST['big']);

[SouthEast]: /images/20220612/1c9c49c198754eb0ba0f2bae6bf3ad9e.png
[SouthEast 1]: /images/20220612/6859efc2900142dbbcc1f7eb64b150b7.png
[SouthEast 2]: /images/20220612/913be933da544a99af1d8de200b5e4c7.png
[SouthEast 3]: /images/20220612/6ec342084bf94692bb3e52d96170cb9b.png
[SouthEast 4]: /images/20220612/63d19b5ae48c4513a9fc3db97eacf8e6.png