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

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

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

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

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

312閲覧

Vue 3のaxiosでPOSTリクエストを送信するとページがリロードされる問題について

yamadaTomoshi

総合スコア1

Vue.js

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

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2024/05/11 18:50

実現したいこと

Vue 3のaxiosでPOSTリクエストを送信するとページがリロードされないようにしたい。
ボタンを押下して↑の処理を実行しリロードされないようにしたい。

発生している問題・分からないこと

Vue 3のaxiosを使用してAPIにPOSTリクエストを送信する際に、ページがリロードされてしまう現象が発生しています。
API側は正常に動作しており、問題はブラウザの挙動に起因する可能性があり。

■動作環境
・HTML+CSS
・Vue 3
・自作のPython API(正常に動作)
使用しているCDN

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.26/dist/vue.global.prod.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

該当のソースコード

html

1<div @click="buttonEvent">ボタン</div>

Vue3

1async buttonEvent() { 2 try { 3 const response = await axios.post( 4 "http://127.0.0.1:5001/post", 5 { 6 id: this.id 7 } 8 ); 9 console.log(response); 10 } catch (error) { 11 console.error(error); 12 } 13 },

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

Vue 3のaxiosを使用したAPI POST通信でページが更新されない方法について、AIに質問しましたが解決できませんでした。

ボタンは削除せず、POST通信の処理を取り除いたり別の処理を入れたら更新されなくなりました。
POST通信が更新の要因だったりしますでしょうか?

・@submit.prevent を使用してフォームのデフォルト動作をキャンセルし、JavaScriptで非同期のPOSTリクエストを送信。
・axiosの設定でGETリクエストを禁止する試み。
・redirect: "manual" オプションを使用してPOSTリクエストのリダイレクトを停止する試みも行った。
・ボタンをdivタグにした。
・ボタンをbuttonタグに変更し、「type="button"」にした。

以上が試した対応策と、解決できない問題に関する情報です。
追加のアドバイスやアイデアがあればお願いします。

補足

特になし

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

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

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

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

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

yamadaTomoshi

2024/05/11 20:27

API側がPOSTリクエストを送信した後にGETリクエストを送信する設計になっていたため、GETリクエストを送信しないように修正したところ、解決できました。
guest

回答1

0

自己解決

API側がPOSTリクエストを送信した後にGETリクエストを送信する設計になっていたため、GETリクエストを送信しないように修正したところ、解決できました。

投稿2024/05/11 20:28

yamadaTomoshi

総合スコア1

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.40%

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

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

質問する

関連した質問