Vue表單用Axios傳送的疑問

vue3 vue.js form axios

greenriver 2021-11-09 11:24:23 ‧ 2278 瀏覽

分享至

大家好，我想請問一個vue表單傳送時的小小問題。

一般直接用表單傳送:
必須要使用<form>還要設定好action跟method
<input>還必須要有name，如下:

<form action="" method="post"  @submit.prevent="handleSubmit">
    <input name="">
    <button type="submit">送出</button>
</form>

那如果我是用Axios傳送

//script
const postForm = function(){
    axios.post('http://xxx',{
        data
    })
}
//template
<form>
    <input>
    <button @click.prevent="postForm">送出</button>
</form>

在雙向綁定的情況下，
(1)我的input是不是就不用name屬性了?form也不必設定action跟method了?

//script
const inputData=ref()
const postForm = function(){
    //token之後會使用axios攔截器帶入
    axios.post('http://xxx',{
        name:inputData.value
    }).then((res)=>{})
    .catch((err)=>{})
}
//template
<form>
    <input v-model="inputData">
    <button @click.prevent="postForm">送出</button>
</form>

更誇張的作法，(2)我是不是連<form>都可以改成<div>?

所以<form>標籤在vue+axios的環境下，其實是沒有意義的?

補充:想請問一下，我看大部分submit都是綁在form標籤上

<form @submit="postForm"></form>

(3)那如果我把submit綁在button，這樣會有問題嗎?

<form>
    <button @click="postFrom"></button>
</form>

froce iT邦大師 1 級 ‧ 2021-11-09 14:13:21 檢舉

1. 在SEO，正確的標籤是有意義的
2. 純就程式方面來說，的確，你完全可以自由用JS去控制你要怎麼送出表單，你愛用div、p、甚至直接body下的直接送都可以

greenriver iT邦研究生 4 級 ‧ 2021-11-09 14:17:54 檢舉

感謝解惑~~~
我忘了還有SEO這東西..XD

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2021-11-09 11:45:00

最佳解答

vue 還有 axios 只是工具
他背後其實是「表單傳送」跟「ajax」的區別
在這邊 ajax 是由 axios 提供的函式庫實現的

ajax 的介紹

關於 ajax 的使用：

不使用函式庫，只用瀏覽器提供的介面
1. XMLHttpRequest
2. fetch：這會用到 Promise，所以可能也要了解一下
使用函式庫
1. axois
2. jquery.ajax

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

greenriver iT邦研究生 4 級 ‧ 2021-11-09 13:06:35 檢舉

所以我把postForm的函式綁定在form或button，其實都沒差摟?

淺水員 iT邦大師 6 級 ‧ 2021-11-09 14:07:42 檢舉

我記得 click 會先發生，之後才是 submit
另外如果不想要「換頁」
click 要阻止事件傳遞，而 submit 是要回傳 false

（要跑是都能跑，只是有些小差異）

greenriver iT邦研究生 4 級 ‧ 2021-11-09 14:19:02 檢舉

感謝~~

淺水員 iT邦大師 6 級 ‧ 2021-11-09 14:31:20 檢舉

補一下，像是下面這個表單內有規定要輸入數字的
如果使用者輸入錯誤的資訊，還是會觸發 click，但是不會觸發 submit
所以綁在 click 的話就不能用瀏覽器內建的驗證，而是要自己檢查了

另外補充一下先前提到的「阻止換頁」：

設定 onsubmit 是回傳 false
綁定 submit 是用 preventDefault

<form>
    年齡 <input type="number" name="age" required>
    <input type="submit">
</form>
<script>
    document.querySelector('form').addEventListener('submit', (evt)=>{
        evt.preventDefault();
        console.log('submit');
    });
    document.querySelector('input[type="submit"]').addEventListener('click', ()=>{
        console.log('click');
    });
</script>

登入發表回應