2019年10月28日 星期一

【ajax】ajax jsonp的方式對.gs送出請求,並防止後跳轉頁面

之前的問題是用js送出請求(偽表單)後寫入試算表,頁面會自動跳轉,所以選用ajax success的方式防止跳轉

後端google app script參考

 function doGet(e) {
   var parameter = e.parameter;
   var callback = e.parameter.callback;
   var name = parameter.name;
   var result = "";

   try {
    result = "Hello " + name;
   } catch (f) {
    result = "Error: " + f.toString();
   }

   result = JSON.stringify({
    "result": result
   });

   return ContentService
   .createTextOutput(callback + "(" + result + ")")//對應cbfn(e)的e
   .setMimeType(ContentService.MimeType.JAVASCRIPT);
 }

前端ajax get

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script>    function cbfn(e) {//要帶參數e作為預設的資料接收參數
     console.log(e.result);
     document.getElementById('demo').innerHTML=e;
   }
   // Make an AJAX call to Google Script
   function callGoogleScript() {
     var url = "https://script.google.com/macros/s/AKfycbyd4ECD5IyPBpWAElWwc5l2pwZ7B_wJEEYWQzk7sy8PHH-KywI/exec";
     var name = "Amit Agarwal"
     name = JSON.stringify(name);//轉成字串傳送
     var request = jQuery.ajax({
     crossDomain: true,
     url: url,
     type: "GET",
     // type: "POST", //還是會以get傳遞
     data:{
       "name":name
     },
     jsonpCallback:'cbfn',
     dataType: "jsonp"
     });

  }
   callGoogleScript();

</script>

操作以後可以發現,確實使用console可以看到有資料的接收。但是這邊有一個小問題是jsonp格式只能使用GET的方式傳送,會有資料長度的問題。

沒有留言:

張貼留言