微信小程序 - form表单提交

微信小程序 - form表单提交

说明：
文章记录 微信小程序端使用post请求访问服务器时，将整个表单作为参数传递到服务器。
语言：微信小程序、java SpringMVC

微信小程序前端

<!-- xx.wxml -->
<form bindsubmit="formSubmit">
    <view class='form_item'>
      <label>取货地址</label> 
      <button id='btn_addr' bindtap='btn_get_addr' size='mini' plain='true' value="{{address}}">选择地址</button>
    </view>
    <view class='item_content'>
      <text wx:if="{{!addrName}}"> 请选择取餐地址 </text>
      <view id='get_addr'> <text name="addrName" >{{addrName}}\n{{address}}</text> </view>
      <input name="addrName" value="{{addrName}}" hidden='true' />
      <input name="address" value="{{address}}" hidden='true' />
      <input name="latitude" value="{{latitude}}" hidden='true' />
      <input name="longitude" value="{{longitude}}" hidden='true' />
      <view id='addr_desc'> <input type='text' name="addr_desc" value='' placeholder='地址描述(非必填)' /> </view>
    </view>
    <view class='form_btn'>
      <button bindtap='btnBackTo' size='mini' > 取消</button><button form-type='submit' size='mini'>确认提交</button>
    </view>
  </form>

// xx.js
formSubmit(fromData){
    console.log("表单数据：",fromData)
//    var checkFormRes = formUtil.checkNullForm(fromData);
 //   if (!checkFormRes){
 //     console.log( "表单信息不完整，阻止表单提交")
 //     return;   // 表单信息不完整，已阻止提交
//    }
//    console.log('表单已通过检测,执行表单提交的业务');

    // 发起post请求 
    wx.request({
      url: app.data.service_url + 'xxx/xxx.do',	// 请求自己服务器的地址
      data: fromData.detail.value ,	// 注意！！！ 此处不用花括号{} 
      method: 'POST',	// 
      header: { "content-type": 'application/x-www-form-urlencoded' },
      success: function (res) {
        console.log("请求成功!  返回数据如下", res);
      },
      fail: function (res) {
        console.log("!!! 请求出错, 请检查网络。 " + res.errMsg);
        wx.showToast({
          title: '网络异常！',
          icon: 'none',
          duration: 3000,
          mask: true
        })
      }
    })
  },

java后端

@Controller
@RequestMapping("/xxx")
public class FlagController {
	
	@Resource(name="xxxxService")
	private IxxxxService xxxService;
	
	@ResponseBody
	@RequestMapping(value="/xxx.do",method=RequestMethod.POST )
	public ResponseResult<Void> newFlag(HttpServletRequest req, HttpServletResponse response) {
		// 通过 getParameter("表单中name的值") 获取到表单的信息
		System.out.println("网页参数：\n" );
		System.out.println(req.getParameter("address"));
		// 获取成功后,用收集的表单信息执行后续业务功能吧
		
		return null;
	}
}