表单的提交

大家要切记这一点：　在任何 Single Page App中，js代码都不会产生. 一个传统意义的form表单提交！（这会引起整个页面的刷新）

所以，我们往往用事件来实现．（桌面开发思维）

例如，在远程有个接口，可以接受别人的留言：

  1. {"result":"ok","content":"(留言的内容)"}

我们可以先用POSTMAN来确认一下:

postman对于接口的调用

例如，下面的代码，就是把输入的表单，提交到我们的后台．

新增加一个文件: /src/components/FormSubmit.vue, 内容如下： 

  1. <template>
  2.   <div>
  3.     <textarea v-model='content'>
  4.     </textarea>
  5.     <br/>
  6.     <input type='button' @click='submit' value='留言'/>
  7.   </div>
  8. </template>
  9. <script>
  11. export default {
  12.   data () {
  13.     return {
  14.       content: ''
  15.     }
  16.   },
  17.   methods: {
  18.     submit: function(){
  19.       this.$http.post('/api/interface/blogs/add_comment',
  20.         {
  21.           content: this.content
  22.         }
  23.       )
  24.       .then((response) => {
  25.           alert("提交成功!, 刚才提交的内容是：" + response.body.content)
  26.         },
  27.         (response) => {
  28.           alert("出错了")
  29.         }
  30.       )
  31.     }
  32.   }
  33. }
  34. </script>

上面的代码中： 

  1.     <textarea v-model='content'>
  2.     </textarea>

就是待输入的表单项 。 

  1. <input type='button' @click='submit' value='留言'/>

则是按钮，点击后会触发提交表单的函数 submit. 

  1.     submit: function(){
  2.       this.$http.post('/api/interface/blogs/add_comment',
  3.         {
  4.           content: this.content
  5.         }
  6.       )
  7.       .then((response) => {
  8.           alert("提交成功!, 刚才提交的内容是：" + response.body.content)
  9.         },
  10.         (response) => {
  11.           alert("出错了")
  12.         }
  13.       )
  14.     }

上面的代码，定义了提交表单的具体函数 submit.

  • this.$http.post 表示 发起的http 的类型是 post.

  • post 函数的第一个参数是 url, 第二个参数是一个json, { content: this.content} 代表了我们要提交的数据

  • then函数的处理同 http get 请求

接下来，我们修改路由文件： src/router/index.js, 增加内容如下：

  1. import FormSubmit from '@/components/FormSubmit'
  3. export default new Router({
  4.   routes: [
  5.     {
  6.       path: '/form_submit',
  7.       name: 'FormSubmit',
  8.       component: FormSubmit
  9.     }
  10.   ]
  11. } )

访问url: http://localhost:8080/form_submit , 输入一段字符串, 如下图所示：

输入表单

点击提交按钮，就可以看到，内容已经提交，并且得到了返回的response, 触发了 alert， 如下图所示：

输入表单

查看一下返回的json： 

  1. {"result":"ok","content":"\u7533\u8001\u5e08\uff0c\u6211\u5b66\u4e60\u5230\u4e86 Vuejs\u7684\u8868\u5355\u7684\u63d0\u4ea4\u4e86\u3002"}

至此，完成了一个完整的 输入表单，提交表单的过程。