iT邦幫忙

0

Vue表單用Axios傳送的疑問

大家好,我想請問一個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下的直接送都可以
感謝解惑~~~
我忘了還有SEO這東西..XD

1 個回答

1
淺水員
iT邦高手 2 級 ‧ 2021-11-09 11:45:00
最佳解答

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

ajax 的介紹

關於 ajax 的使用:

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

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

淺水員 iT邦高手 2 級 ‧ 2021-11-09 14:07:42 檢舉

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

(要跑是都能跑,只是有些小差異)

感謝~~

淺水員 iT邦高手 2 級 ‧ 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>

我要發表回答

立即登入回答