微信小程序 - 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;
}
}
下一篇: 微信小程序-form表单提交