微信小程序提交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 相关文章推荐
javascript date格式化示例
Sep 25 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
原生js开发的日历插件
Feb 04 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
JS实现十分钟倒计时代码实例
Oct 18 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应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
详解Python验证码识别
2016/01/25 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
django实现支付宝支付实例讲解
2019/10/17 Python
利用python实现AR教程
2019/11/20 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
服务型党组织建设典型材料
2014/05/07 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015年公司工作总结
2015/04/25 职场文书
推广普通话的宣传语
2015/07/13 职场文书
趣味运动会简讯
2015/07/20 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android