微信小程序实现提交input信息到后台的方法示例


Posted in Javascript onJanuary 19, 2019

本文实例讲述了微信小程序实现提交input信息到后台的方法。分享给大家供大家参考,具体如下:

wxml文件:

<!-- 用户名事件绑定 -->
<view class="fl_form">
<text>您的姓名</text>
<input type="text" placeholder='请输入您的姓名' value="{{userName}}" bindblur='userNameInput'></input>
</view>
<!-- 所属部门事件绑定 -->
<view class="fl_form">
<text>所属部门</text>
<input type="text" placeholder='请输入所属部门' value="{{userBranch}}" bindblur='userBranchInput'></input>
</view>
<!-- 联系电话事件绑定 -->
<view class="fl_form">
<text>联系电话</text>
<input type="text" placeholder='请输入联系电话' value="{{userTell}}" bindblur='userTellInput'></input>
</view>
<!-- 日期选择器 mode="date" -->
<view class="fl_form">
<picker mode="date" value="{{date}}" start="{{date}}" end="2020-01-01" bindchange="bindDateChange">
<view class="picker">
<text>选择日期</text> <text class="chosedate">{{date}}</text>
</view>
</picker>
</view>
<!-- 时间选择器 mode="time" -->
<view class="fl_form newtime">
<picker mode="time" value="{{startime}}" start="09:00" end="21:00" bindchange="starttime">
<view class="picker">
<text>开始时间</text> <text class="chosedate">{{starttime}}</text>
</view>
</picker>
<picker mode="time" value="{{endtime}}" start="09:00" end="21:00" bindchange="endtime">
<view class="picker end">
<text>结束时间</text> <text class="chosedate">{{endtime}}</text>
</view>
</picker>
</view>
<!-- 提交按钮 -->
<button class="formbtn" bindtap='orderMeeting'>提交</button>

js代码:

var util = require('../../utils/util.js') //引入微信自带的日期格式化
const app = getApp()
Page({
data: {
date:util.formatDate(new Date), //格式化日期
starttime: '9:00', //开始时间
endtime: '21:00', //结束时间
userName: '',
userBranch: '',
userTell: ''
},
bindDateChange: function (e) {
this.setData({
date: e.detail.value
})
},
starttime: function (e) {
this.setData({
starttime: e.detail.value
})
},
endtime: function (e) {
this.setData({
endtime: e.detail.value
})
},
userNameInput: function (e) {
// console.log(e.detail.value)设置用户名
this.setData({
userName: e.detail.value
})
},
userBranchInput: function (e) {
//设置部门
this.setData({
userBranch: e.detail.value
})
},
userTellInput: function (e) {
//设置电话
this.setData({
userTell: e.detail.value
})
},
orderMeeting: function () { //提交input信息到后台
var userName = this.data.userName;
console.log(userName)
var userBranch = this.data.userBranch;
console.log(userBranch)
var userTell = this.data.userTell;
console.log(userTell)
var date = this.data.date;
console.log(userTell)
}
})

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

Javascript 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
vue设置全局访问接口API地址操作
Aug 14 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 #Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 #Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 #Javascript
详解vue-router导航守卫
Jan 19 #Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 #Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 #Javascript
js实现延迟加载的几种方法详解
Jan 19 #Javascript
You might like
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
php实现文件预览功能
2017/05/23 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python3使用urllib模块制作网络爬虫
2016/04/08 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
《称象》教学反思
2014/04/25 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
催款函范文
2015/06/24 职场文书
小学运动会报道稿
2015/07/22 职场文书
2019消防宣传标语!
2019/07/10 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS