微信小程序提交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 相关文章推荐
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
React中阻止事件冒泡的问题详析
Apr 12 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python解释执行原理分析
2014/08/22 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
2014年母亲节寄语
2014/05/07 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android