微信小程序提交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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
JS中Location使用详解
May 12 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP缓冲区用法总结
2016/02/14 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
33种Javascript 表格排序控件收集
2009/12/03 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
python操作CouchDB的方法
2014/10/08 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
优秀的计算机专业求职信范文
2013/12/27 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
高三毕业评语
2014/12/31 职场文书
黄河绝恋观后感
2015/06/08 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书