Lỗi khi insert data vào google sheet

WyNotMe · June 18, 2021, 6:55am

Chào mn! Mình có đang thực hiện việc insert data vào google sheet thông qua ajax. Nhưng mà mình lại bị lỗi như bên dưới. Mn có thể hướng dẫn mình cách giải quyết với ạ. Cảm ơn mn!

Đây là ajax của mình:

$.ajax({
    url: sheetUrl,
    method: "GET",
   crossDomain : true,
   data: data,
    dataType: "json",
    success: function() {}
})

HR16 · June 18, 2021, 1:17am

Bạn có thể sửa lỗi này bằng cách yêu cầu server trả về JSONP. Đầu tiên, bạn cần viết một hàm nhận kết quả trả về từ script làm tham số. Sau đó, bạn thêm /exec?callback=tên_hàm_đó vào url và chỉnh dataType thành jsonp. Ví dụ:

function sheet_callback(data){
    //Xử lí gì đó
}
$.ajax({
    url: sheetUrl + "/exec?callback=sheet_callback",
    method: "GET",
    dataType: "jsonp"
})

Tìm hiểu thêm ở đây:

WyNotMe · June 18, 2021, 1:41am

HR16:

Bạn có thể sửa lỗi này bằng cách yêu cầu server trả về JSONP. Đầu tiên, bạn cần viết một hàm nhận kết quả trả về từ script làm tham số. Sau đó, bạn thêm /exec?callback=tên_hàm_đó vào url và chỉnh dataType thành jsonp. Ví dụ:
function sheet_callback(data){
    //Xử lí gì đó
}
$.ajax({
    url: sheetUrl + "/exec?callback=sheet_callback",
    method: "GET",
    dataType: "jsonp"
})
Tìm hiểu thêm ở đây:
https://anonystick.com/blog-developer/jsonp-la-gi-su-khac-biet-giua-jsonp-va-ajax-2020072855752929

Cảm ơn sự giúp đỡ của bạn. Mình đã làm theo và đã insert đc data vào sheet. Tuy nhiên callback function lại ko đc gọi. Mình tính khi có response trả về thì sẽ thông báo insert data thành công. Hình console báo về như dưới. Bạn xem xem có thể có hướng nào hướng dẫn mình đc ko. Cảm ơn b

Đây là ajax sau khi sửa của mình:

HR16 · June 18, 2021, 9:57am

JSONP chỉ dùng được cho GET request thôi bạn . Bạn muốn gửi dữ liệu lên thì phải chuyển nó thành URL parameter rồi dùng hàm doGet trong app script để lấy dữ liệu.
Tham số hàm doGet:
https://developers.google.com/apps-script/guides/web#request_parameters

function sheet_callback(data){
    //Xử lí gì đó
}
const url_params = $.param(data) 
//Chuyển object thành url parameter. Doc: https://api.jquery.com/jquery.param/
$.ajax({
    url: `${sheetUrl}/exec?callback=sheet_callback&${url_params}`, 
//Tương đương với sheetUrl + "/exec?callback=sheet_callback" + '&' + url_params
    method: "GET",
    dataType: "jsonp"
})

P/s: Quên mất là App Script không có sẵn JSONP, bạn phải sửa doGet lại thành thế này:

function doGet(e){
 //Xử lí gì đó    
 let data = "dữ liệu trả về"
 return ContentService
  .createTextOutput(e.parameter.callback + "(" + JSON.stringify(data)+ ")")
  .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

Sốt:

WyNotMe · June 18, 2021, 12:11pm

var SHEET_NAME = "orders";

var SCRIPT_PROP = PropertiesService.getScriptProperties();

function doGet(e){
  return handleResponse(e);
}

function doPost(e){
  return handleResponse(e);
}

function handleResponse(e) {
  var lock = LockService.getPublicLock();
  lock.waitLock(30000);
  
  try {
    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1;
    var row = []; 
    for (i in headers){
      row.push(e.parameter[headers[i]]);
    }
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    return ContentService
    .createTextOutput("success")
          .setMimeType(ContentService.MimeType.JAVASCRIPT);
  } catch(err){
    return ContentService
    .createTextOutput("error")
          .setMimeType(ContentService.MimeType.JAVASCRIPT);
  } finally {
    lock.releaseLock();
  }
}

function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

Bạn có thể dành chút thời gian xem giúp mình phần code trong file .gs phía trên của mình chút được không? Vấn đề mình hiện đang vướng phải là:

Dù đã thêm dữ liệu thành công vào google sheet nhưng response trả về vẫn luôn báo lỗi như bên dưới. Như hình dưới là khi mình chạy hàm error của $.ajax để show ra:
Nhìn lại phần code trong .gs thì mình chỉ nghĩ đơn giản là nếu insert data thành công rồi thì trả về "sucess", còn lỗi thì "error" (Vì mình không cần dữ liệu phức tạp mà chỉ cần một thông báo đơn giản trả về như vậy nên phần return handleResponse mình chỉ viết như vầy). Rất mong nhận được nhận xét từ bạn

Ps: Mình đã thử gọi 1 callback như cách bạn chỉ ở phía trên trong phần return của handleResponse nhưng giường như nó cũng ko thực hiện bởi lí do gì đó nên bạn đừng nghĩ là mình ko thử làm theo cách b hướng dẫn

HR16 · June 18, 2021, 1:36pm

Mình tìm ra cách rồi, bạn chỉ việc xoá phần dataType đi là xong, không cần làm callback.

P/s: Vẫn chỉ dùng được với phương thức GET.

WyNotMe · June 18, 2021, 2:00pm

Nó lại dính CORS r bạn

Mà mình test thử trên page jquey giống như bạn thì nó lại đc. Liệu nó có liên quan gì đến việc local và server thật ko bạn? Mình đang chạy giả lập server của wamp và dùng laravel

HR16 · June 18, 2021, 3:44pm

Mình nghe nói là phải gửi request ở trang dùng chung giao thức mới được, trong trường hợp này là HTTPS. Mà tính ra cũng lạ, lẽ ra server phải trả Content-Type là application/javascript chứ .

Bạn có server riêng nên mình nghĩ là lấy server đó làm proxy trung gian sẽ hay hơn. Client gửi tham số lên server, server gửi lên GS, GS trả về server rồi server trả về client. Làm thế sẽ không bị dính same-origin policy, nếu gửi bằng POST và dùng HTTPS nữa thì không lo bị đọc trộm dữ liệu

WyNotMe · June 18, 2021, 3:31pm

cảm ơn sự giúp đỡ của bạn. để mình tìm hiểu thêm xem xử lý gs ở phía server như b chỉ xem sao