欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序 - form表单提交

程序员文章站 2022-04-04 16:07:30
...

微信小程序 - 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;
	}
}