質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Q&A

0回答

2067閲覧

Vue × axios × POST でフォームデータをGASに送りたいが...

matsuo_basho

総合スコア88

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

0グッド

0クリップ

投稿2020/09/06 13:53

お世話になっております。

表題についてですが、
以下の環境下でhtmlフォームからPOSTで飛ばしたJSONPをGAS側で受け取りたいのですが、
うまくいきません。どなたがご教授いただけると幸いです。

GAS 側結果

イメージ説明

ソースコード

html

1<div id="app" v-cloak> 2 3 <form @submit.prevent="submit"> 4 5 <input type="text" name="name" v-model="name"> 6 <button type="submit">送信</button> 7 8 </form> 9 10</div> 11 12<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 13<script src="https://cdnjs.cloudflare.com/ajax/libs/url-search-params/1.1.0/url-search-params.js" integrity="sha512-XITCo00srdVr9XH7ep5JEijPPpLA60TqvvoqLCyQlIdctLUjEsIRCtlgSaoj+RbsF+e/YnkaRTV/7Ei5GvVylg==" crossorigin="anonymous"></script> 14<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 15<script src="https://cdn.jsdelivr.net/npm/axios-jsonp/dist/index.min.js"></script>

javascript

1<script> 2 3new Vue({ 4 5 data : { 6 name : "" 7 }, 8 9 methods : { 10 11 submit(){ 12 13 const url = "〇〇"; 14 15 let params = new URLSearchParams() 16 params.append('name', this.name) 17 18 const config = { 19 adapter : axiosJsonpAdapter, 20 callbackParamName : "cb", 21 headers : { 22 'Content-Type' : 'application/x-www-form-urlencoded' 23 } 24 } 25 26 axios 27 .post(url, params, config) 28 .then((response) => { 29 console.log(response); 30 }) 31 .catch((err) => console.log(err)) 32 33 } 34 35 } 36 37}).$mount("#app"); 38 39</script>

GAS

1 2function doGet(e){ 3 4 for( let key in e.parameter ){ 5 6 console.log(key); 7 8 } 9 10 returnJson(e); 11} 12 13/* ---- JSONPを返す処理 ---- */ 14function returnJson(e){ 15 let return_json = JSON.stringify( 16 { 17 'header' : { 18 "Access-Control-Allow-Origin" : "*", 19 "Content-type" : "application/json; charset=UTF-8" 20 }, 21 'work' : 'success' 22 } 23 ) 24 return ContentService.createTextOutput(e.parameter.callback + '(' + return_json + ')') 25 .setMimeType(ContentService.MimeType.JAVASCRIPT) 26}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問