微信小程序 - form表单提交

微信小程序 - form表单提交

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

微信小程序前端

    
      取货地址 
      选择地址
    
    
       请选择取餐地址 
       {{addrName}}\n{{address}} 
      
      
      
      
        
    
    
       取消确认提交
    
  

// 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 newFlag(HttpServletRequest req, HttpServletResponse response) {
		// 通过 getParameter("表单中name的值") 获取到表单的信息
		System.out.println("网页参数：\n" );
		System.out.println(req.getParameter("address"));
		// 获取成功后,用收集的表单信息执行后续业务功能吧
		
		return null;
	}
}