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>

效果如下:

说明:
(1) 下面的代码是带输入的表单项
<textarea v-model='content'>
</textarea>(2) 下面的代码则是按钮被单击后触发提交表单的函数submit
<input type='button' @click='submit' value='留言' />(3) 下面的代码定义了提交表单的函数submit
submit: function () {this.$http.post('/api/interface/blogs/add_comment',{content: this.content}).then((response) => {alert('提交成功!, 刚才提交的内容是: ' + response.body.content)},(response) => {alert('出错了')})
}

参考《Vue.js快速入门》 P102~P104

vue --- 提交表单到服务器相关推荐

微信提交表单到服务器,微信小程序页面表单如何跟图片一起上传服务器
拆开写. 表单提交是 wx.request 上传图片是 wx.uploadFile 你需要写一个通用图片上传接口,上传图片后台返回图片的url.这个通用接口在任何需要提交图片的表单都可以用到. 添加图 ...
python自动登录并提交表单_用python模拟登录（解析cookie + 解析html + 表单提交 + 验证码识别 + excel读写 + 发送邮件）...
老婆大人每个月都要上一个网站上去查数据,然后做报表. 为了减轻老婆大人的工作压力,所以我决定做个小程序,减轻我老婆的工作量. 准备工作 1.tesseract-ocr 这个工具用来识别验证码,非常好用 ...
Vue使用axios提交表单数据
html代码 <html> <head><title>Vue提交表单数据</title><script src="https://cdn ...
Web前端笔记-解决Vue编写的输入框（input、textarea等）使用JS设置value时提交表单无效的问题
主要的原因是vue相当于套了一层,界面上的输入框会关联model,提交表单的时候,他是直接提交model的值,而不是传统的输入框里面的值. 所以用这种: let textAreaItem = docu ...
php curl 发送checkbox,使用curl 提交表单（多维数组+文件）数据到服务器的有关问题...
使用curl 提交表单(多维数组+文件)数据到服务器的问题我在本地搭了一个测试服务器,Apache+PHP,想使用curl自动提交表单数据到远程服务器. 远程服务器表单有两项数据需要提交: 1.in ...
vue form表单提交动态数据
项目vue-cli搭建需求为:vue页面跳转至第三方的支付页面操作流程为:点击确认按钮时得到得到第三方网页的url和参数信息,以form表单的post方式提交尝试了N种方法,都不可以成功完成逻辑 ...
Vue form表单input框手动赋值提交时表单input值没有生效验证仍然是空
一.问题 1.input 赋值后表单提交却为空在调用接口将返回的值赋在表单的 input 上或者子页面传递数值给父页面form表单model元素后,提交表单,明明值已经赋上去了,结果提交后显示的该值 ...
vue使用防抖节流（提交表单、实时搜索）
1.封装防抖节流方法 deTh.js /*** 闭包函数* * 防抖:对于短时间内连续触发的事件(滚动事件.表单重复提交.页面resize事件,常见于需要做页面适配的时候),让某个时间期限内,事件处理 ...
Vue.js 提交表单
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 ! <!DOCTYPE html> <html> <he ...

vue --- 提交表单到服务器

vue --- 提交表单到服务器相关推荐

最新文章

热门文章