微信小程序提交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 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
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数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
javascript新手语法小结
2008/06/15 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
javascript生成大小写字母
2015/07/03 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
selenium+python自动化测试之环境搭建
2019/01/23 Python
set在python里的含义和用法
2019/06/24 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Python如何根据时间序列数据作图
2020/05/12 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
师范类求职信
2014/06/21 职场文书
个人德育工作总结
2015/03/05 职场文书
比赛主持人开场白
2015/05/29 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang
Redis基本数据类型Set常用操作命令
2022/06/01 Redis