微信小程序提交form操作示例


Posted in Javascript onDecember 30, 2018

本文实例讲述了微信小程序提交form操作。分享给大家供大家参考,具体如下:

在微信小程序中也存在form组件,bindsubmit这个属性可以用于携带 form 中的数据触发 submit 事件,它鞋带的参数形式如下:

event.detail = {value : {'name': 'value'} , formId: ''}

其中的name,和一般的网页一样,将需要上传的input等表单组件设置name属性,在这里,form传递的参数,使用name作为一个key

提交动作是由<form/> 表单中 formType 为 submit 的 <button/> 组件来控制的,示例如下:

<button form-type="submit" class='search'><span>开始计算</span></button>

当点击这个button时,会触发bindsubmit绑定的js文件中的事件,例如:

<form bindsubmit="formSubmit" bindreset="formReset"> 
<input type="text" name="price"/>
<button form-type="submit" class='search'><span>开始计算</span></button>
</form>

在这里,点击这个button则会调用js中的formSubmit,同时在formSubmit事件中可以用e.detail.value.price的方式获取name为price的组件的value值,js中formSubmit的定义如下:

formSubmit: function (e) {
 this.setData({
  price: e.detail.value.price, //用e.detail.value.price,获取了form中name为price组件的value,赋值给js文件data中定义的price变量
 })
 var that = this; //在success部分,this失效,需要先将this赋值给that,通过调用that代替this比如:that.setData({})
 wx.request({ //使用微信提供的wx.request完成信息交互
  url: config.service.XXXX, //url的值统一定义在了configuration.js中,在本js开始时var config = require('../../config');引入
  header: {
   "Content-Type": "application/x-www-form-urlencoded" //使用form方式传递参数
  },
  method: "POST",
  dataType:"json",
  data: Util.json2Form({ price: this.data.price }), //将要传递的数据使用util.js中的json2Form转为标注的form数据格式
  success: function (res) { //res是返回的数据,success是响应成功后执行部分
   console.log(res.data) //显示res中携带的数据
  },
  complete: function (res) { // complete类似finally,最后必然执行
   if (res == null || res.data == null) { //如果返回值为空,则提示网络请求失败
   console.error('网络请求失败');
   return;
   }
  }
  })
 },

util.js的内容:

function json2Form(json) {
 var str = [];
 for (var p in json) {
 str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
 }
 return str.join("&");
}
module.exports = {
 json2Form: json2Form,
}

wx.request也可以使用功能json格式传输数据,但是个人后台不太习惯处理json文件

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
Vue表单实例代码
Sep 05 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 #Javascript
详解vue 兼容IE报错解决方案
Dec 29 #Javascript
玩转Koa之koa-router原理解析
Dec 29 #Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 #Javascript
玩转Koa之核心原理分析
Dec 29 #Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 #Javascript
bootstrap与pagehelper实现分页效果
Dec 29 #Javascript
You might like
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
Python中return语句用法实例分析
2015/08/04 Python
Python实现Linux中的du命令
2017/06/12 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
python 日志增量抓取实现方法
2018/04/28 Python
pandas删除指定行详解
2019/04/04 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Python 爬虫的原理
2020/07/30 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
宣传保护环境的公益广告词
2014/03/13 职场文书
升职演讲稿范文
2014/05/23 职场文书
路政管理求职信
2014/06/18 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
2014年政教处工作总结
2014/12/20 职场文书
活动费用申请报告
2015/05/15 职场文书
2016年猴年新春致辞
2015/08/01 职场文书