微信小程序怎么进行数据提交

不凡其他 2020-04-09 1.8K+

微信小程序如何进行表单提交,把表单的数据提交到后台呢？

直接把小程序的表单组件(input那些东西)用form标签包裹起来

给form标签添加bindsubmit事件

例子：

<view class="page" data-weui-theme="{{theme}}">
  <form bindsubmit="formBindsubmit">
    <view class="weui-form">
      <view class="weui-form__control-area">
        <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">错误提示</view>
          <view class="weui-cell weui-cell_active">
            <view class="weui-cell__hd">
              <view class="weui-label">姓名</view>
            </view>
            <view class="weui-cell__bd">
              <input class="weui-input" name='name' placeholder="请输入姓名" />
            </view>
          </view>
          <view class="weui-cell weui-cell_active">
            <view class="weui-cell__hd">
              <view class="weui-label">联系电话</view>
            </view>
            <view class="weui-cell__bd">
              <input class="weui-input" name='tel' placeholder="请输入联系电话" />
            </view>
          </view>
        </view>
        <view class="weui-btn-area">
          <button class="weui-btn weui-btn_primary" formType="submit">确定</button>
        </view>
        <view class="weui-form__extra-area">
          <view class="weui-footer">
            <view class="weui-footer__text">Copyright © 2020 izhizuo.cn</view>
          </view>
        </view>
      </view>
    </view>
  </form>
</view>

以上是wxml的写法，下边介绍js的写法

根据刚才在from表单上bindsubmit事件上添加的方法，在js中声明该方法,具体写法参考下方js代码

formBindsubmit: function (e) {
    const params = e.detail.value
    var _this = this;
    console.log("提交数据")
    //info就是我们要向后台提交的数据，需要在data中先声明
    info = { 
    "name": params.name,
    "tel": params.tel
    };
  //这里可以看到要提交的数据
    console.log(info)
    wx.request({//AJAX
      url: getApp().globalData.url + '/wxApi/collection',
      data: JSON.stringify(info),
      header: { token: wx.getStorageSync('token') },
      method: "POST",
      dataType: "json",
      success: function (res) {
        if (res.data.code == 0) {
          var data = res.data;
             //这段代码经过删减可能复制会报错
        } else {
 //原理就是这样,先用form标签包裹住所有input同时在form标签上增加bindsubmit事件，增加好事件后在js中写事件对应的方法，然后ajax提交到后台就可以了        }
      }
    })
  },

标签：微信小程序微信支付

本文地址： https://izhizuo.cn/post/154.html

文章来源：不凡