Vuejs基本知識(十三)【表單的提交】
大家要切記這一點: 在任何 Single Page Ap
p中,js程式碼都不會產生. 一個傳統意義的form
表單提交!(這會引起整個頁面的重新整理)
所以,我們往往用事件來實現.(桌面開發思維)
例如,在遠端有個介面,可以接受別人的留言:
- URL: http://siwei.me/interface/blogs/add_comment
- 引數:
content
: 留言的內容. - 請求方式:
POST
- 返回結果:
{"result":"ok","content":"(留言的內容)"}
我們可以先用POSTMAN
來確認一下:
例如,下面的程式碼,就是把輸入的表單,提交到我們的後臺.
新增加一個檔案: /src/components/FormSubmit.vue
, 內容如下:
<template>
<div>
<textarea v-model='content'>
</textarea>
<br/>
<input type='button' @click='submit' value='留言'/>
</div>
</template>
<script>
export default {
data () {
return {
content: ''
}
},
methods: {
submit: function(){
this.$http.post('/api/interface/blogs/add_comment',
{
content: this.content
}
)
.then((response) => {
alert("提交成功!, 剛才提交的內容是:" + response.body.content)
},
(response) => {
alert("出錯了")
}
)
}
}
}
</script>
上面的程式碼中:
<textarea v-model='content'>
</textarea>
就是待輸入的表單項 。
<input type='button' @click='submit' value='留言'/>
則是按鈕,點選後會觸發提交表單的函式 submit
.
submit: function(){
this.$http.post('/api/interface/blogs/add_comment',
{
content: this.content
}
)
.then((response) => {
alert("提交成功!, 剛才提交的內容是:" + response.body.content)
},
(response) => {
alert("出錯了")
}
)
}
上面的程式碼,定義了提交表單的具體函式 submit
.
-
this.$http.post
表示 發起的http
的型別是post
. -
post
函式的第一個引數是url
, 第二個引數是一個json
,{ content: this.content}
代表了我們要提交的資料 -
then
函式的處理同http get
請求
接下來,我們修改路由檔案: src/router/index.js
, 增加內容如下:
import FormSubmit from '@/components/FormSubmit'
export default new Router({
routes: [
{
path: '/form_submit',
name: 'FormSubmit',
component: FormSubmit
}
]
} )
訪問url
: http://localhost:8080/form_submit
, 輸入一段字串, 如下圖所示:
點選提交按鈕,就可以看到,內容已經提交,並且得到了返回的response
, 觸發了 alert
, 如下圖所示:
檢視一下返回的json:
{"result":"ok","content":"\u7533\u8001\u5e08\uff0c\u6211\u5b66\u4e60\u5230\u4e86 Vuejs\u7684\u8868\u5355\u7684\u63d0\u4ea4\u4e86\u3002"}
至此,完成了一個完整的 輸入表單,提交表單的過程。
相關文章
- Vuejs基本知識(十二)【表單的繫結】VueJS
- Vuejs基本知識(九)【路由】VueJS路由
- Form 表單提交知識的總結(全)ORM
- Vuejs基本知識(十)【使用樣式】VueJS
- Vuejs基本知識(五)【檢視中的渲染】VueJS
- Vuejs基本知識(四)【頁面渲染過程 】VueJS
- Vuejs基本知識(一)【專案資料夾基本結構】VueJS
- Vuejs基本知識(三)【語法簡寫說明】VueJS
- Vuejs基本知識(八)【頁面間的引數傳遞】VueJS
- Vuejs進階知識(二十三)【與CSS前處理器結合使用】VueJSCSS
- Vuejs進階知識(十八)【component 進階知識】VueJS
- Vuejs進階知識(十六)【mixin】VueJS
- Vuejs進階知識(十九)【slot】VueJS
- 提交表單
- Vuejs進階知識(十七)【computed properties】VueJS
- 影像的基本知識
- Javascript物件的基本知識JavaScript物件
- js 基本知識JS
- DAX 基本知識
- 1、基本知識
- Uboot基本知識boot
- javaweb基本知識JavaWeb
- shell基本知識
- git基本知識Git
- 磁碟的基本知識和基本命令
- form表單提交方式ORM
- Kotlin知識歸納(十三) —— 註解Kotlin
- 圖片的基本知識點
- Javascript函式的基本知識JavaScript函式
- 如何避免表單的重複提交?
- Vuejs進階知識(二十四)【自定義Directive】VueJS
- Vagrant (一) - 基本知識
- js表單檔案提交JS
- Ajax 提交表單資料
- Python學習-字串的基本知識Python字串
- JQuery的一些基本知識jQuery
- linux(基於ubuntu)的基本知識LinuxUbuntu
- vuejs基礎玩法(基礎知識,不喜勿噴!)VueJS