vue的表单提交

vue的表单提交需要基于vue-resource

<template>
  <div class="hello">
    <form @submit.prevent="submit">
        <div>
            姓名:<input type="text" v-model="user.name">
        </div>

        <div>
            性別:
            <label>
                <input type="radio" value="1" v-model="user.gender"> 男
            </label>

            <label>
                <input type="radio" value="2" v-model="user.gender"> 女
            </label>
        </div>

        <input type="submit" value="提交">
    </form>
  </div>
</template>

<script>
export default {
  name: ‘hello‘,
  data () {
    return {
       user: {
            name: ‘‘,
            gender: ‘‘
        }
    }
  },
  methods:{
  submit: function() {
          var formData = JSON.stringify(this.user); // 这里才是你的表单数据

          this.$http.post(‘/admin/‘, formData).then((response) => {
              // success callback
          }, (response) => {
              // error callback
          });
        }
  }
}
</script>
时间: 2024-10-31 06:24:30

vue的表单提交的相关文章

vue 表单提交

在vue中,有一个$el 属性. 该属性在created 的阶段还是不可用的,直到 mounted 之后,我们才能获取到 $el 属性. $el是vue实例中 el 属性标识的dom元素. ------------------------------------ vue表单提交,有时候需要提交 文件数据,这时候需要用到 formDate,代码如下 1 let formData = new FormData($(this.$el).find(".import-form")[0]); //

Iview 表单提交: Cannot read property &#39;validate&#39; of undefined

提交表单时,提示报这个错,找了半天,然后也百度了很久,一直没找到答案,代码如下: <link href="~/lib/iview3.1.4/styles/iview.css" rel="stylesheet" /> <link href="~/css/login.css" rel="stylesheet" /> <link href="~/lib/iview3.1.4/styles/iv

表单提交数据格式form data

前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交表单方法,js代码如下: submitForm() { let data = 'title="标题"&content="内容"&pic[]="image1"&pic[]="image2"&pic[]

Ajax表单提交

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")

表单提交时如何将错误信息传递到页面中,并且保存原来提交数据

曾经何时,你还有我或许都在困惑,如何方便的将验证不通过的表单信息再返回到前台页面,例如我注册一个账号,辛辛苦苦填写了N多项,一个格式验证没有通过,一切都需要充填,虽然Ajax可以解决这个问题,但是我们总不能把所有表单提交都弄成ajax,更何况有若干人就是没事把javascript给禁止了.哎哎,好了解决方案来了,下面以用户登录为例,说说我的解决方案. 服务器端用nodejs实现: login.html 简单的提交表单 <form action="" id="loginF

关于表单提交的书写

注意form表单提交的action属性写地址的时候,开头不要用"/",因为如果写上"/"的话,系统就会在WEB-INF/views中寻找这个jsp文件的 未完待续...

ajax传递数组、form表单提交对象数组

在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发任务中,遇到了需要批量传递对象,也就是需要传递对象数组,在此做个总结.今天又遇到需要向后台传递数组,便一并写下来吧. 1.ajax传递普通数组 前台代码 var deleteNum= [];//定义要传递的数组 deleteNum.push("1"); deleteNum.push(&qu

带文件的表单提交

今天用表单提交一个文件到服务器,但服务器始终接收不到上传的文件.最后排除出原因有二: 1 表单需要封装. <form>标签要加上 enctype="multipart/form-data"属性 2 文件选择控件一定要有name和id属性 <form method="post" action="http://www.baidu.com" enctype="multipart/form-data"> <