微信小程序:雙表單單按鈕提交技巧

近日開發微信小程序中，遇到了雙表單單按鈕提交問題。

首先：微信小程序中的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提交出去以後顯示發送數據的格式是：

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進行詳細

的條件判斷等操作，最後通過對應關係重新組成所需要的數據，再發送即可。