微信小程序 数据请求 表单的创建 提交 与接收

2022-10-11 21:14:36 143 0
魁首哥

好了 开始正题了,本节小小研究了下 微信小程序的表单创建与提交

先看看效果

1. 表单页面

[javascript] view plain copy

  1. var app = getApp();

  2. Page({

  3. data:{

  4. // text:”这是一个页面”

  5. array:[“中国”,”美国”,”巴西”,”日本”],

  6. toast1Hidden:true,

  7. modalHidden: true,

  8. modalHidden2: true,

  9. notice_str: ”,

  10. index:0

  11. },

  12. toast1Change: function (e){

  13. this.setData({toast1Hidden:true});

  14. },

  15. //弹出确认框

  16. modalTap: function(e) {

  17. this.setData({

  18. modalHidden: false

  19. })

  20. },

  21. confirm_one: function(e) {

  22. console.log(e);

  23. this.setData({

  24. modalHidden: true,

  25. toast1Hidden:false,

  26. notice_str: ‘提交成功’

  27. });

  28. },

  29. cancel_one: function(e) {

  30. console.log(e);

  31. this.setData({

  32. modalHidden: true,

  33. toast1Hidden:false,

  34. notice_str: ‘取消成功’

  35. });

  36. },

  37. //弹出提示框

  38. modalTap2: function(e) {

  39. this.setData({

  40. modalHidden2: false

  41. })

  42. },

  43. modalChange2: function(e) {

  44. this.setData({

  45. modalHidden2: true

  46. })

  47. },

  48. bindPickerChange: function(e) {

  49. console.log(‘picker发送选择改变,携带值为’, e.detail.value)

  50. this.setData({

  51. index: e.detail.value

  52. })

  53. },

  54. onLoad:function(options){

  55. // 页面初始化 options为页面跳转所带来的参数

  56. },

  57. onReady:function(){

  58. // 页面渲染完成

  59. },

  60. onShow:function(){

  61. // 页面显示

  62. },

  63. onHide:function(){

  64. // 页面隐藏

  65. },

  66. onUnload:function(){

  67. // 页面关闭

  68. },

  69. formSubmit: function(e) {

  70. var that = this;

  71. var formData = e.detail.value;

  72. wx. request ({

  73. url: ‘

  74. data: formData,

  75. header: {

  76. ‘Content-Type’: ‘application/ json

  77. },

  78. success: function(res) {

  79. console.log(res.data)

  80. that.modalTap();

  81. }

  82. })

  83. },

  84. formReset: function() {

  85. console.log(‘form发生了reset事件’);

  86. this.modalTap2();

  87. }

  88. })

3. 部分样式

[css] view plain copy

  1. #adduser{

  2. background: #f5f5f5;

  3. }

  4. .section__title{

  5. float: left;

  6. width:30%;

  7. }

  8. .form-group{

  9. float: right;

  10. width: 70%;

  11. }

  12. .section{

  13. clear: both;

  14. width:90%;

  15. margin: 2rem auto;

  16. }

  17. .input-text{

  18. border: 1pxsolid#ddd;

  19. }

  20. .button{

  21. border: 1pxsolid#1aad19;

  22. border-radius: 2px;

  23. }

  24. .picker{

  25. padding: 13px;

  26. background-color: #FFFFFF;

  27. }

4. 服务器端

[php] view plain copy

  1. var_dump($_REQUEST);

一个带form表单的页面

在这里定义好自己form表单的元素名称


 
 表单提交
 
性别 {{error}}
1234567891011121314151617181920212223242526

然后调用wx.request的API方法将表单提交到后台

Page({
 data: {
 pickerHidden: true,
 chosen: ''
 },
 pickerConfirm: function(e) {
 this.setData({
 pickerHidden: true
 }) this.setData({
 chosen: e.detail.value
 })
 },
 pickerCancel: function(e) {
 this.setData({
 pickerHidden: true
 })
 },
 pickerShow: function(e) {
 this.setData({
 pickerHidden: false
 })
 },
 formSubmit: function(e) {
 var _this = this
 /********************* 
 wx.redirectTo({
 url:'create_photo'
 })
 **********************/
 wx.request({
 url: '
 data:
 {
 name: e.detail.value.name,
 age: e.detail.value.age,
 gender: e.detail.value.gender
 }
 ,
 method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
 header: { 'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
 },
 success: function(res){
 var err = res.data.error if(err) {
 _this.setData({
 error:err
 })
 } else {
 wx.redirectTo({
 url:'create_photo'
 })
 }
 },
 fail: function() {
 // fail
 },
 complete: function() {
 // complete
 }
 })
 },
 formReset: function(e) {
 console.log('form发生了reset事件,携带数据为:', e.detail.value) this.setData({
 chosen: ''
 })
 }
})这里需要提到几个坑,首先是你所有的js和json文件,如果创建了,里面一定要有内容,哪怕json文件就是一对花括号 

{}

哪怕js文件就只有一个Page

Page({})

都必须有。如果你没有,微信的开发工具是不会报错的。但是在加载的时候,这里其实已经出错了,这些空文件后面的文件统统都没有加载进去。结果导致你后面再写任何代码都是该文件不存在或者该方法不存在。这里要感谢 @leochen 帮我找到的这个bug,解决了我的按钮提交无效。

ok我们来看看效果:

这是输入界面,然后我在微信开发工具的调试界面看form提交的格式

我们可以看到提交的内容是

name:微信小程序联盟age:18gender:MAN123456 

提交的hecontent-type:

application/x-www-form-urlencoded; charset=UTF-8两个值都是我们在代码中写的。

这里需要说明一下,head并不是必须的,微信默认的content-type是application/json,但是我的后台框架配置必须是x-www-form-urlencoded格式才接收,所以这里跟微信官方的文档不同,而charset=UTF-8是一种习惯问题,告诉后台编码格式,这样更规范。

闲话少说,我们看看后台的断点

看来我们的req已经成功的接收到了前台传过来的表单,然后我一个个的放入我的对象中。最后调用mybatis存入数据库

这就是我存入数据库的数据。这样一个完整的表单提交录入就完成了。

虽然这个功能很简单,但是因为微信提供的后台请求方式是自己封装的,所以可能还是会有一些刚入门的前端朋友不习惯,毕竟是第一次使用嘛,总想试一试是否能够成功录入数据库。所以我才写了这样一个简单的demo。

完整的demo我这里就不上传了,因为没有后台的服务和数据库,下了也用不了。我考虑后面是不是可以做成一个简单的api,然后再把查询也做了,这样大家就可以提交之后看到效果了,那个时候再把完整的demo分享出来供大家参考。

以下是建库脚本,如果有能力的后端猿们也可以帮我把这件事情做了,分享给大家,毕竟众人拾柴火焰高嘛!

-- ==================================================-- formDemo信息表-- ==================================================DROP TABLE IF EXISTS d_form;CREATE TABLE d_form (
 id CHAR(32) NOT NULL COMMENT 'ID序列号',
 name VARCHAR(32) NOT NULL COMMENT '用户名',
 age INT NOT NULL DEFAULT 0 COMMENT '年龄',
 gender CHAR(32) NOT NULL DEFAULT 'DEFAULT' COMMENT '性别',
 cre_tim TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '注册时间',
 upd_tim DATETIME COMMENT '更新时间',
 remark VARCHAR(128) COMMENT '备注', PRIMARY KEY (id)
) COMMENT='formDemo信息表' ENGINE=InnoDB;CREATE UNIQUE INDEX uniq_idx_form_name ON d_form (name); 

收藏
分享
海报
0 条评论
143
上一篇:互联网+PHP编程语言怎么成就高薪梦 下一篇:php二维数组中,使用某个键的值作为键组成新的数组方法

本站已关闭游客评论,请登录或者注册后再评论吧~

忘记密码?

图形验证码