使用 AJAX 解析用于电子表格上传的 CSV 文件行答案

【问题标题】：Parsing CSV file rows for SpreadSheets upload with AJAX使用 AJAX 解析用于电子表格上传的 CSV 文件行
【发布时间】：2020-03-06 09:58:13
【问题描述】：

我正在尝试使用 AJAX 将潜在客户从 CSV 发送到 Google 表格，例如 this method 将表单发送到 Google 表格。

我在 Gogole App Script 中使用此代码获得了它，但我需要在本地执行更多操作，例如在完成时删除 csv 文件。

function importCSVFromWeb() {

  var csvUrl = "http://URL/csv/data.csv";
  var csvContent = UrlFetchApp.fetch(csvUrl).getContentText();
  var csvData = Utilities.parseCsv(csvContent);
  var sheet = SpreadsheetApp.getActiveSheet();
  var range = sheet.getDataRange();
  var lastRow = range.getLastRow();

  sheet.getRange(lastRow + 1, 1, csvData.length, csvData[0].length).setValues(csvData);
}

这是我的 data.csv 的一个示例

"4","7","22300","johndoe@example.com","John","Doe","Company SL","666123456","519780151","","","","Instagram"
"6","10","08028","johnsmith@example.com","John","Smith","Company2 SL","666456789","519780151","","","","Facebook"

这是我的 AJAX 脚本：

  <script>
    $.ajaxSetup({ cache: false });//disable cache

    $.ajax({
        url: 'csv/data.csv',
        dataType: 'text',
      }).done(successFunction);

    function successFunction(data) {
      var allRows = data.split(/\r?\n|\r/);
      for (var singleRow = 0; singleRow < allRows.length; singleRow++) {

      var rowCells = allRows[singleRow].split(',');
        document.querySelector("#leads-csv").innerHTML += rowCells+"<br/>";

        //alert(rowCells);

        const sheetsURL = 'https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXX/exec'
      const sheets = document.forms['form-csv'] //evento de formulario


            sheets.addEventListener('submit', e => {
                e.preventDefault()

                alert("Se va a insertar en Google Sheets");//once by row

                fetch(sheetsURL, {
                        method: 'POST',
                        body: new FormData(sheets) //Failed to construct FormData!!
                    })
                    .then(response => console.log('Datos guardados en Google Sheets', response))
                    .catch(error => console.error('¡Error, revisa el código superior!', error.message))
            });
      }
    }
    </script>

我在尝试使用 CSV 行创建 FormData 时遇到问题

【问题讨论】：

请问I have the problem when i trying to create the FormData with CSV rows的the problem的详细情况？
您能解释一下您的代码流程是什么吗？您向哪个服务器/应用程序发出请求？您遇到的错误是什么？
Chrome 控制台在“body: new FormData(sheets)”行显示“Uncaught TypeError: Failed to construction 'FormData':parameter 1 is not of type 'HTMLFormElement'”。无论如何，我已经将重点改为使用服务器端工具。最后我使用了 Guzzle PHP。

标签： javascript ajax csv parsing google-sheets

【解决方案1】：

最后我使用了 Guzzle PHP，提交异步表单比使用 javascript 作弊要容易得多。这是胜利的小sn-p：

    $file = fopen("csv/datos.csv", "r");

    if($file) {

    //If file exists, start read
    while(! feof($file)) {
    $line = fgets($file);

    //Convert complete line to single fields  
    $singleLine = explode(",",$line);  

        $client = new \GuzzleHttp\Client();

        //CSV fields to Google Sheets fields
        $response = $client->request('POST', 'https://script.google.com/macros/s/URL/exec', [
                'form_params' => [
                'nombreDeVariable2' => $singleLine[0],
                'nombreDeVariable3' => $singleLine[1],
                'Zip' => $singleLine[2],
                'email' => $singleLine[3],
                'first_name' => $singleLine[4],
                'last_name' => $singleLine[5],
                'company' => $singleLine[6],
                'phone' => $singleLine[7],
                'elqSiteId' => $singleLine[8],
                'comentarios' => $singleLine[9],
                'gdpr_legitimate_interest' => $singleLine[10],
                'retURL' => $singleLine[11],
                'web' => $singleLine[12],
            ]
        ]);

对于发布到 JSON API y 仅将“form_params”更改为“json”，在后面添加 API 端点和以下行：

$response = $client->post("/end-point", $options);
echo $response->getBody();

【讨论】：