iT邦幫忙

1

JS筆記-使用ajax傳送表單(ex.傳送google表單)

  • 分享至 

  • xImage
  •  

資訊爆炸 在網路上發問
要找到真知灼見的解答 機率偏低 很多是來亂的
很多講了一個沒用的廢話/幹話就拍屁股走了
甚至亂嗆人 擺姿態的亂源一堆

這並不是自學者的資料蒐集有問題 或是理解能力不夠
但卻造成自學方面90%的障礙
為了避免這種學習負成長 一定要懂得把那些野狗式的嘴砲忽略

學息路上能有個完善的筆記可以參考
比認真發問還有用千萬倍
此系列就是這種目的

進入正題
一般來說 要傳送表單用ajax以外也可以寫個hidden的ifame來做
以下的筆記就是ajax送表單的內容
來自letswrite非常棒的文章 教學以外還給予很棒的實作:"美化google表單"
甚至有範例可以參考 圖文精美 可說是筆記界的模範大師
https://www.letswrite.tw/custom-google-form/

var data = {
  'entry.248434920': name,
  'entry.1569038925': sex(),
  'entry.1509045370': cat,
  'entry.758411200': msg
};
$.ajax({
  type: 'POST',
  url: 'https://docs.google.com/forms/d/e/1FAIpQLSeTgHEpVpuV_OHakO-25X-O7I4T1tIzIAUqHWLRvUqG9e6TvQ/formResponse',
  data: data,
  contentType: 'application/json',
  dataType: 'jsonp',
  complete: function() {
    alert('資料已送出!');
  }
});

有一些小筆記是傳送google表單 每一個data都要有值(因為設定必填)
然後這是jquery要記得先加cdn
也可以用pureJS (參見:https://youmightnotneedjquery.com/)
作法如下

    var formData = new FormData(); 

        formData.append('entry.248434920', '純JS試試看');
        formData.append('entry.1569038925', '純JS試試看');
        formData.append('entry.1509045370', '純JS試試看');
        formData.append('entry.758411200', '純JS試試看');

    var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
            {
                alert(xmlHttp.responseText);//這可以去掉
            }
        }
        xmlHttp.open("post", 'https://docs.google.com/forms/d/e/1FAIpQLSeTgHEpVpuV_OHakO-25X-O7I4T1tIzIAUqHWLRvUqG9e6TvQ/formResponse'); 
        xmlHttp.send(formData); 

有人可能會想到fetch 是也行 不過server端要加上允許CORS
否則就會失敗


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言