零基础学小程序004----小程序post请求,提交数据到服务器,小程序下单,小程序用户注册功能
时间:2022-07-28
本文章向大家介绍零基础学小程序004----小程序post请求,提交数据到服务器,小程序下单,小程序用户注册功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
由于这段时间工作比较忙,小程序入门系列课程一直没有更新,今天好不容易抽个时间来更新系列教程,今天的这个教程对大家很有用,涉及到和后台服务器的数据交互。
不多说,先看效果图
技术要点
- 姓名,手机号,地址为空验证
- post请求
- 简单的下单功能实现
- api数据解析
- post提交参数有数组时的问题解决
一,简单页面布局
简单的把页面布局写出来,主要是几个input输入框
<!-- order.wxml --><view class="login">
<form bindsubmit="formSubmit">
<input name="name" class="login-input" type="text" placeholder="请输入姓名" />
<input name="mobile" class="login-input" type="number" placeholder="请输入手机号" />
<input name="address" class="login-input" type="text" placeholder="请输入地址" />
<button class="btn_login" formType="submit">提交订单</button>
</form></view>
二,做提交数据的简单校验
主要判断name,phone,address是否为空,手机号是否符合11位。
if (e.detail.value.name.length == 0) { this.showErrorToast('姓名不能为空')
} else if (e.detail.value.mobile.length == 0) { this.showErrorToast('手机号不能为空')
} else if (e.detail.value.mobile.length != 11) { this.showErrorToast('请输入11位手机号码')
} else if (e.detail.value.address.length ==0) { this.showErrorToast('地址不能为空!')
}
三,先说一下api
url:https://30paotui.com/buyer/order/create 请求类型:post 提交参数格式如下
openid:小程序小石头
phone:12345678901
name:夏天
address:杭州市临平街道
items:[{productId:1,productQuantity:2},{productId:2,productQuantity:2}]
post请求后服务器返回json如下
1,成功
{ "code": 100, "msg": "成功",
"data": {
"orderID": "1529819130135395193"
}
}
2,失败
{
"timestamp": "2018-06-24T04:34:33.413+0000",
"status": 500,
"error": "Internal Server Error",
"message": "微信id必传",
"path": "/buyer/order/create"}
比如我openid参数传空
四,提交数据到服务器(下单)
这里是重点,不管是注册用户,用户提交订单,提交数据到后台都是一样的原理,把这里学会了,你以后再做数据提交也就都会了(代码格式有点乱,可以点击查看原文看源码)
formSubmit: function(e) {
if (e.detail.value.name.length == 0) {
this.showErrorToast('姓名不能为空')
} else if (e.detail.value.mobile.length == 0) {
this.showErrorToast('手机号不能为空')
} else if (e.detail.value.mobile.length != 11) {
this.showErrorToast('请输入11位手机号码')
} else if (e.detail.value.address.length ==0) {
this.showErrorToast('地址不能为空!')
} else { // post提交表单
wx.request({
url: 'https://30paotui.com/buyer/order/create', header: { "Content-Type": "application/x-www-form-urlencoded"
},
method: "POST",
data: {
openid: 'qclqclqcl', //这里先写死微信id
phone: e.detail.value.mobile,
name: e.detail.value.name, address: e.detail.value.address, items: JSON.stringify([{ productId: 1, productQuantity: 2
}, { productId: 2, productQuantity: 2
}])
}, success: function(res) { console.log(res) if (res.statusCode != 200) {
wx.showToast({ //这里提示失败原因
title: res.data.message, icon: 'loading', duration: 1500
})
} else {
wx.showToast({ title: '订单提交成功', //这里成功
icon: 'success', duration: 1000
})
}
}, fail: function(res) { console.log(fail)
wx.showToast({ title: '请求失败', icon: 'none', duration: 1500
})
} })
}
},
几点注意
1,这里的formSubmit函数名对应wxml文件里的
<form bindsubmit="formSubmit">
2,post提交的参数中有数组的话,需要用JSON.stringify()方法把数组转化为string
items: JSON.stringify([{ productId: 1, productQuantity: 2
}, { productId: 2, productQuantity: 2}])
到这里就可以实现下单功能了
下面贴出来完整代码(代码格式有点乱,可以点击查看原文看源码)
// order.js
Page({ data: {}, showErrorToast: function(e) {
wx.showModal({ title: '提示!', confirmText: '朕知道了', showCancel: false, content: e, success: function(res) { if (res.confirm) { console.log('用户点击确定')
}
}
})
}, formSubmit: function(e) { if (e.detail.value.name.length == 0) { this.showErrorToast('姓名不能为空')
} else if (e.detail.value.mobile.length == 0) { this.showErrorToast('手机号不能为空')
} else if (e.detail.value.mobile.length != 11) { this.showErrorToast('请输入11位手机号码')
} else if (e.detail.value.address.length ==0) { this.showErrorToast('地址不能为空!')
} else { // post提交表单
wx.request({ url: 'https://30paotui.com/buyer/order/create', header: { "Content-Type": "application/x-www-form-urlencoded"
}, method: "POST", data: { openid: 'qclqclqcl', //这里先写死微信id
phone: e.detail.value.mobile, name: e.detail.value.name, address: e.detail.value.address, items: JSON.stringify([{ productId: 1, productQuantity: 2
}, { productId: 2, productQuantity: 2
}])
}, success: function(res) { console.log(res) if (res.statusCode != 200) {
wx.showToast({ //这里提示失败原因
title: res.data.message, icon: 'loading', duration: 1500
})
} else {
wx.showToast({ title: '订单提交成功', //这里成功
icon: 'success', duration: 1000
})
}
}, fail: function(res) { console.log(fail)
wx.showToast({ title: '请求失败', icon: 'none', duration: 1500
})
} })
}
},
})
下图是数据提交成功后,服务器上的数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SimpleCommand框架介绍以及简单使用(一)
- Android开发中使用achartengine绘制各种图表的方法
- Android开发中Listview动态加载数据的方法示例
- Android自定义实现顶部粘性下拉刷新效果
- Android开发使用自定义view实现ListView下拉的视差特效功能
- Android打造炫酷进度条效果
- Android开发实现自定义新闻加载页面功能实例
- Android下Activity间通信序列化过程中的深浅拷贝浅析
- Android升级支持库版本遇到的两个问题详解
- Android开发使用Drawable绘制圆角与圆形图案功能示例
- Android开发中自定义ProgressBar控件的方法示例
- Android 使用自定义RecyclerView控件实现Gallery效果
- Android开发中GridView用法示例
- React Native中Android物理back键按两次返回键即退出应用
- Android仿简书搜索框效果的示例代码