微信小程序:双表单单按钮提交技巧

近日开发微信小程序中，遇到了双表单单按钮提交问题。

首先：微信小程序中的form组件：

<form bindsubmit="formSubmit">
...
<button class="primary" formType="submit" >提交</button>
</form>

bindsubmit所对应提交的方法

button中formType所对应表单的提交

这个时候问题就显现出来了：

当我们同一个页面，同一个form表单中包括两种想要提交的不同数据，该如何处理？

首先我们看xhtml中的写法(这里制作的是一套卷子使用iviewUI)：这里可以看出我想要通过一个submit提交两个不同的试卷

<form bindsubmit="formSubmit">
 <view>
     <view class="page">
      <!-- 二层判断 -->
       <i-cell  i-class="borderTop">单选</i-cell>
            <view>
                <view>
                      题目1名称
                </view>
                <view >
                    <view class="section section_gap">
                     <radio-group class="radio-group" name="题目1">
                       <label >  
                      <radio class="radio" value="题目1内容"}}'>
                         <text style="font-size:15px;line-height:26rpx">
                               题目内容
                          </text>
                       </radio>
                     </label>
                            </radio-group>
                        </view>
                    </view>
                </view>
            </view>
        </view>
 <!-- @另一套卷子-->
   <view>
        <text>试卷名</text>
   </view>
    <view>
        <view class="page">
            <!-- 二层判断 -->
            <view >
                <i-cell>单选</i-cell>
                <view>
                    <view>
                        <text>
                            题目2名称
                        </text>
                    </view>
                    <view>
                        <view class="section section_gap">
                            <radio-group class="radio-group" >
                                <label>
                                    <radio class="radio" value="题目2">
                                        <text>
                                            题目内容
                                        </text>
                                    </radio>
                                </label>
                            </radio-group>
                        </view>
                    </view>
                </view>
            </view>
        </view>
   <button class="primary" formType="submit"">提交</button>
</form>

我们看formSubmit方法：

formSubmit: function(e) {
    var that = this,
    wx.request({
      method: "POST",
      url: ***** ,
      data: {
        answer: e.detail.value
      },
      success: function(ret) {
        wx.showToast({
          title: "提交成功",
          icon: "success",
          duration: 1000
        });
        setTimeout(function() {
          wx.navigateBack({});
        }, 1000);
      }
    });
  },

这个方法中所实现的功能是：提交表单，如果提交成功1S后返回上一页

但是这里有个问题：此处的e.detail.value所指的是form表单中所有组件的name值

当form提交出去以后显示发送数据的格式是：

扫描二维码关注公众号，回复： 3255549 查看本文章

answer:{"题目1":"题目1内容","题目2","题目2内容"}

但是后台需要我们处理成这种格式：

allAnswer:[
answer1:[{"题目1":"题目1内容"}],
answer2:[{"题目2":"题目2内容"}]
]

这个时候就要在js中对数据进行处理了：

//首先在data中定义好发送所需要的数组/对象：
data{
   answer1:{}
   answer2:{},
   allAnswer:[]
}
//然后在formSubmit中进行处理
  formSubmit: function(e) {
    var that = this;
    var answer1 = that.data.answer1;
    var answer2 = that.data.answer2;
    var allAnswer = that.data.allAnswer;
    var value = e.detail.value //定义value为获取到的全部表单组件值
    for (var a in value) {     //使用for in 遍历拿出key和value
      if(a.indexOf('题目1') != -1){    //这里的条件根据所需可以任意更改
        //每一位进行比对，符合条件的按照所需格式赋值
        //这里可以赋值为需要的格式
        answer1 [a] = value[a]
        that.setData({
          answer1 : answer1 
        })
      }
    if(a.indexOf('题目2') != -1){
        //array的每一位与value的每一位对应
        array[a] = value[a];
        //这里可以赋值为需要的格式
        answer2 [a] = value[a]
        that.setData({
          answer2 : answer2 
        })
      }
    }
    allAnswer = {
      ["answer1"]: answer1 ,
      ["answer2"]: answer2
    };
    wx.request({
      method: "POST",
      url: ****** ,
      data: {
        allanswer: allanswer,
      },
      success: function(ret) {
        that.setData({
          isDisable: true
        });
        wx.showToast({
          title: "提交成功",
          icon: "success",
          duration: 1000
        });
        setTimeout(function() {
          wx.navigateBack({});
        }, 1000);
      }
    });
  },

这个时候发送出的东西已经完美的显现了。

该文章所阐述最主要的思想是：

解决这种类似的form表单提交数据处理的事情，可以多利用for...in循环来对key和value进行详细

的条件判断等操作，最后通过对应关系重新组成所需要的数据，再发送即可。

微信小程序:双表单单按钮提交技巧

猜你喜欢