zoukankan      html  css  js  c++  java
  • 小程序-提交信息(姓名,电话)

    wxml:

    <view class='info' wx:if="{{infoCeng}}">
         <view class='infobox'>
              <form bindsubmit='searchBox'>
                    <view class='listinfo'>
                         <text>姓名:</text>
                         <input type='text' name="myname" id='name' class='inputinfo'></input>
                    </view>
                    <view class='listinfo'>
                         <text>电话:</text>
                         <input type='tel' name="tel" id='tel' class='inputinfo'></input>
                   </view>
                   <button type='submit' id='tijiao' form-type='submit'>提交</button>
           </form>
        </view>
    </view>
     
    js:
    searchBox:function(e){
             var that=this;
             that.setData({
                    showPage:true,
              })
             nameUser = e.detail.value.myname;
             telUser = e.detail.value.tel;
             console.log(nameUser + telUser)
             if (nameUser=="") {
                    wx.showToast({
                           title: '请输入您的姓名',
                           duration:1000,
                           icon:"none"
                    })
                   return;
              } else if (!/1[3-9]d{9}/.test(telUser)) {
                    wx.showToast({
                          title: '请正确输入您的手机号',
                          duration: 1000,
                          icon: "none"
                     })
                     return;
              }else{
                   wx.login({
                        success: function (lgres){
                                wx.request({
                                          url: 'https://xxxxxxx.com/Client.aspx',
                                          method: 'POST',
                                          data: {
                                                 ModuleName: "WX_BJML",//空间名 接口文档里每个接口会有标明 必填
                                                 MethodName: "SubInfo",//方法名 接口文档里每个接口会有标明 必填
                                                 Guid: "",//令牌获取到的值 必填(获取令牌接口例外)
                                                 Token: "",//使用令牌md5加密生成的token值 必填(获取令牌接口例外)
                                                 Data: {
                                                          code: lgres.code,// lgres.code,//只查某个人的 不填不限制
                                                          name: nameUser,//姓名
                                                           tel: telUser,
                                                   }
                                              },
                                        header: {
                                                 'content-type': 'application/json'
                                        },
                                        success: function (res1) {
                                                      console.log("信息提交成功");
                                                      console.log(res1)
                                                      wx.showToast({
                                                            title: '礼品领取成功',
                                                            duration:1500,
                                                             icon: "none"
                                                      })
                                                        that.setData({
                                                                  infoCeng:false,
                                                                   linqushow:false,
                                                                   monery:"您已成功领取礼品:"+liping,
                                                       });
     
                                         },
                                      fail:function(){

                                           },
                                   complete:function(){
                                              that.setData({
                                                showPage: false,
                                             })
                                     }
                           })
                     }
            })
     
         }
    },
     
    更新于2018-3-16上午
    上面的代码中是正常的情况下,不会发展其他的额外需求下可以那样书写;
    若是后期客户需要推送模板消息时,那我们前端的代码就要有所改变
    1.将form标签放在页面的最外层
    2.form标签将组件内的用户输入的<switch/><input/><checkbox/><slider/><radio/><picker/>
    3.当点击<form/>表单中formType为submit的<button/>组件时,会将表单组建中加上name来作为Key.
    wxml:
    <form bindsubmit="formsubmit">
    <view class='info' wx:if="{{infoCeng}}">
         <view class='infobox'>
                    <view class='listinfo'>
                         <text>姓名:</text>
                         <input type='text' name="myname" id='name' class='inputinfo'></input>
                    </view>
                    <view class='listinfo'>
                         <text>电话:</text>
                         <input type='tel' name="tel" id='tel' class='inputinfo'></input>
                   </view>
                   <button type='submit' id='tijiao' form-type='submit'>提交</button>
        </view>
    </view>
    </form>
    formsubmit:function(e){
         console.log('form发生了submit事件,携带数据为:', e.detail.value)
          console.log('form返回formId,携带数据为:', e.detail.formId);
          //下面的内容更上面的一样
    }
  • 相关阅读:
    SetROP2
    JOIN
    Delphi深度探索之PItemIDList的基本概念
    访问网络资源示例
    AVICAP 中文
    AVICAP (全)
    摄像头(简介)
    以远程计算机上的用户身份访问Com+应用
    非匿名方式访问远程的com+
    三层控件基础知识
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/8553796.html
Copyright © 2011-2022 走看看