在最近的小程序项目中,使用到了 <web-view></web-view> 内嵌 H5 页面,在 H5 中需要使用 form 表单提交数据。
H5 使用的技术框架是 vue+vuex,刚开始编码如下:
//form表单,v-model绑定数据
<form :action="url" ref="setForm" method="post">
<input type="hidden" v-model="id" name="id">
<input type="hidden" v-model="code" name="code">
<input type="hidden" v-model="dta" name="dta">
</form> //接口内提交表单数据
let form = this.$refs.setForm;
this.id = res.data.id;
this.code = res.data.code;
this.dta = res.data.data;
form.submit();
联调发现这样写,v-model 内的参数没有赋值。亲测以下两种方法都可以拿到值:
解决方法1:v-model 结合延时处理
//接口内提交表单数据
let form = this.$refs.setForm;
this.id = res.data.id;
this.code = res.data.code;
this.dta = res.data.data;
setTimeout(function(){
form.submit();
},500);
解决方法2:使用 document 创建元素
//form表单
<form :action="url" ref="setForm" method="post">
</form> //接口内提交表单数据
let form = this.$refs.setForm; arr = [{
name: 'id',
val: res.data.id
},
{
name: 'code',
val: res.data.code
},
{
name: 'dta',
val: res.data.data
}]; for(let p in arr) {
let input = document.createElement('input');
input.setAttribute('name': arr[p].name);
input.setAttribute('code': arr[p].code);
input.setAttribute('dta': arr[p].data);
input.setAttribute('type': 'hidden');
} form.submit();
这样写在 H5 中访问是没有问题的,但是当在小程序的环境中访问时问题来了:form-data 里根本没有数据!
原因在于:web-view 与 form-data 不能同时使用。
解决方法:改为 get ,亲测可行。(可以修改 form 的 enctype 为 application/x-www-form-urlencoded 试一下,不过这种方法还未验证)
//form表单
<form :action="url" ref="setForm" method="get">
</form>