將Ajax javascript發佈到沒有jQuery的Google Spreadsheet

我想獲得關於如何在沒有jQuery的情況下使用ajax來發布Google電子表格中的數據信息的幫助。將Ajax javascript發佈到沒有jQuery的Google Spreadsheet

如jQuery的實在是簡單，是這樣的：

var gformUrl = 'https://docs.google.com/forms/d/abcdefg1234567890/formResponse'; 

var gformData = { 
    'entry.1405357202': 'text #1', 
    'entry.2112718259': 'text #2', 
    'entry.1657451952': 'text #3', 
    'entry.737451165': 'text #4' 
}; 

$.post(gformUrl,gformData);

現在，即使它顯示在控制檯無交叉原點的錯誤，但它仍然偉大工程。

我試圖不使用jQuery和做，在純JavaScript，但沒有成功，只是還沒有，這裏是我的代碼：

var xhr = new XMLHttpRequest(); 
xhr.open('POST', gformUrl, true); 
xhr.send(JSON.stringify(gformData));

來源

2015-04-22 Gil Goldshlager

你說你得到一個跨起源錯誤，但是'$。員額（）'方法仍然在電子表格中添加這些條目的作品？ – boombox

YEP！我猜jQuery的奇蹟;） XMLHttpRequest無法加載https://docs.google.com/forms/d/abcdefg1234567890/formResponse。請求的資源上沒有「Access-Control-Allow-Origin」標題。原因'http：// localhost'因此不允許訪問.' –

如果$.post()與Access-Control-Allow-Origin錯誤甚至工作，罪魁禍首很可能是正在發送的數據的類型。根據關於CORS的MDN文章，使用POST的簡單跨站點請求需要數據的內容類型爲application/x-www-form-urlencoded，multipart/form-data或text/plain。

目前，您的XMLHttpRequest()發送的JSON內容類型爲text/html。我們來解決這個問題。

知道了這一點，您可以通過將content-type請求標頭設置爲application/x-www-form-urlencoded併發送編碼數據來嘗試以下操作。

--EDIT--將我以前的xhr.send(encodeURIComponent(JSON.stringify(gformData)));更改爲Barmar的解決方案，以避免使用數組。

var gformUrl = 'https://docs.google.com/forms/d/abcdefg1234567890/formResponse'; 

var gformData = { 
    'entry.1405357202': 'text #1', 
    'entry.2112718259': 'text #2', 
    'entry.1657451952': 'text #3', 
    'entry.737451165': 'text #4' 
}; 

var xhr = new XMLHttpRequest(); 
xhr.open('POST', gformUrl, true); 
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded; charset=UTF-8'); 

var formData = ''; 
for (var key in gformData) { 
    formData += encodeURIComponent(key) + '=' + encodeURIComponent(gformData[key]) + '&'; 
} 
xhr.send(formData.substr(0, formData.length-1));

來源

2015-04-22 23:29:43 boombox

很好，謝謝:) –

因此，將您的答案（設置請求標頭）與用於將JSON信息轉換爲URL編碼格式的@Barmar代碼結合在一起，完成了這項工作。 –

更新了我的答案。很高興它的工作！ :) – boombox

$.post發送URL編碼格式的數據，而不是JSON 。這是param=val&param=val&...格式。

var formDataArray = []; 
for (var key in gformData) { 
    formDataArray.push(encodeURIComponent(key) + '=' + encodeURIComponent(gformData[key])); 
} 
xhr.send(formDataArray.join('&');

來源

2015-04-22 22:38:12 Barmar

謝謝，但不幸的是，它仍然不起作用，只是在控制檯中給出了交叉原點錯誤，但在jQuery中卻不起作用。 XMLHttpRequest無法加載https://docs.google.com/forms/d/abcdefg1234567890/formResponse。請求的資源上沒有「Access-Control-Allow-Origin」標題。原因'http：// localhost'因此是不允許訪問的。' –

由於@boombox提到需要設置請求標頭，將其與您的代碼結合解決了問題，所以非常感謝:) –

將Ajax javascript發佈到沒有jQuery的Google Spreadsheet

回答

相關問題