首页 > 解决方案 > javascript没有为上传的CSV中的所有记录调用ajax

问题描述

我编写了一个代码来解析上传CSV并发送请求以Places API 获取 CSV 中的所有记录,然后将它们显示在CSV. 代码适用于 csv 中的少量记录,但是当我在超过 400 条记录上尝试它时,它不会显示所有结果。

网页在api.pkadmissions.com上直播,CSV 在这里CSV

我尝试了几种方法,例如回调,但没有运气

这是 Javascript 和 HTML 表格代码:

            <table class="table table-hover table-condensed" id="myTable">
                <tr>
                    <td>Name</td>
                    <td>Address</td>
                    <td>Phone</td>
                    <td>Website</td>
                    <td>Rating</td>
                    <td>Lat</td>
                    <td>Lng</td>
                </tr>
            </table>            
        </div>

解析 CSV 的代码是:

            function uploadDealcsv () {}; 
            var parsedata_obj={results:[]};
            var parsedata=[]
            /*------ Method for read uploded csv file ------*/
            uploadDealcsv.prototype.getCsv = function(e) {

                let input = document.getElementById('qw');
                if(input){
                    input.addEventListener('change', function() {
                        $('#data').remove();
                        if (this.files && this.files[0]) {

                            var myFile = this.files[0];
                            var reader = new FileReader();

                            reader.addEventListener('load', function (e) {

                                let csvdata = e.target.result; 
                parseCsv.getParsecsvdata(csvdata); // calling function for parse csv data 
            });

                            reader.readAsBinaryString(myFile);
                        }
                    });
                } }

                /*------- Method for parse csv data and display --------------*/
                uploadDealcsv.prototype.getParsecsvdata = function(data) {

        let newLinebrk = data.split("\n");
        for(let i = 0; i < newLinebrk.length; i++) {

            parsedata.push(newLinebrk[i].split(","))
        }
           // console.log(parsedata);

           send_request(parsedata,function(a){console.log('Completed',a);});

       }

这是使 AJAX 调用进一步调用 API 的 php 页面的代码,请注意该send_request方法是从解析 csv 的方法调用的

       var send_request = (parsedata,callback)=>{
         console.log(parsedata.length)
         for(var i=0;i<parsedata.length;i++){
            console.log(i+ " - "+ parsedata[i][0]);
            // alert(parsedata_obj.results.length+ " - "+ parsedata[i][0]);
            if(!parsedata[i][0]){
                continue
            }
            var site_name = parsedata[i][0].split('o/a')
            if(site_name.length>1){
                site_name = site_name[1];
            }
            else{
                site_name=site_name[0];
            }
            var desired = site_name.replace(/[^\w\s]/gi, '')
            var search_string = desired+' '+parsedata[i][3];
            timeouter(search_string)
        }
        callback(1);
    }
    function timeouter(search_string){
        setTimeout(
            first_call(search_string,(result)=>{
                console.log(result);
                add_tr(result);
            }),1000);
    }
    function first_call(search_string,callback){
        $.ajax({url: 'getdata.php',
            timeout:30000,
            type:'POST',
                    data:{
                        search_string:search_string.rep_all(' ','%20')
                    },
                    success: function(result1){
                        result1= JSON.parse(result1);
                        if(result1.status=='OK'){
                            var placeid = result1.candidates[0].place_id;
                            secondcall(placeid,(result)=>{
                                result=JSON.parse(result);

                                callback(result);
                            });

                        }
                        else{
                            callback({'result':search_string,'status':'NO_RESULTS'})
                        }
                    }
                });
    }
    function secondcall(placeid,callback){
        $.ajax({url: 'getdata.php',
            timeout:30000,
            data:{
                place_id:placeid
            },
                        type:'POST',
                        success:function(result){
                            callback(result);
                        }
                    })
        }

这只是在表中添加一行:

    function add_tr(result){
        var name,phone,addr,lat,lng,rating,website='';

        data = result.result;
    // console.log(result);
    if(result.status=='NO_RESULTS'){
        name = data;
        $('#myTable tr:last').after('<tr id="data"><td>'+name+'</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
    }
    else if(result.status=='OK'){

        if(data.name){
            name = data.name;   
        }
        if(data.hasOwnProperty('formatted_phone_number')){
            phone= data.formatted_phone_number;
        }
        if(data.hasOwnProperty('formatted_address')){
            addr = data.formatted_address;
        }
        if(data.hasOwnProperty('website')){
            website = data.website;
        }
        if(data.hasOwnProperty('rating')){
            rating = data.rating;
        }
        if(data.hasOwnProperty('geometry')){
            lat =data.geometry.location.lat;
        }
        if(data.hasOwnProperty('geometry')){
            lng = data.geometry.location.lng;   }
        $('#myTable tr:last').after('<tr>'+
            '<td>'+name+'</td>'+
            '<td>'+addr+'</td>'+
            '<td>'+phone+'</td>'+
            '<td>'+website+'</td>'+
            '<td>'+rating+'</td>'+
            '<td>'+lat+'</td>'+
            '<td>'+lng+'</td>'+
            '</tr>');
    }
    console.log(parsedata_obj.results.length);
}
var parseCsv = new uploadDealcsv();
parseCsv.getCsv();
</script>

标签: javascriptjqueryajaxcallbackqueue

解决方案


我没有测试你的代码,但我认为问题是 400 行同时触发了太多的 AJAX 请求。也许你可以尝试这个问题的解决方案:

如何在 jQuery 中进行批量 ajax 请求?


推荐阅读