vue form表单提交动态数据
项目vue-cli搭建需求为:vue页面跳转至第三方的支付页面操作流程为:点击确认按钮时得到得到第三方网页的url和参数信息,以form表单的post方式提交尝试了N种方法,都不可以成功完成逻辑,最终是jQuery动态创建form表单提交的。最终成功代码://生成from表单方法放在mounted 里,在button事件里执行,注意button不要为submit,数据在别的方法里,这...
项目vue-cli搭建
需求为:vue页面跳转至第三方的支付页面
操作流程为:点击确认按钮时得到得到第三方网页的url和参数信息,以form表单的post方式提交
尝试了N种方法,都不可以成功完成逻辑,最终是jQuery动态创建form表单提交的。
最终成功代码:
//生成from表单方法 放在mounted 里,在button事件里执行,注意button不要为submit,数据在别的方法里,这里就不贴了
generate() {
//创建form
var form = $("<form></form>");
//设置属性
form.attr("action", yourURL);
form.attr("method", "post");r
//创建input,即参数
//我这里数据格式是json,所以是for in
for (const key in yourData) {
if (yourData.hasOwnProperty(key)) {
const element = yourData[key];
form.append($(`<input type='text' name=${key}>`).attr("value", element));
}
}
form.appendTo("body");
//不需要展示所以把ta隐藏起来
form.hide();
//提交表单
form.submit();
}
失败方案 一:
form直接创建在html中(ref:from钩子函数),用status控制不要显示,点击button时,先@submit.prevetn='submitBefore’阻止默认事件请求API获取数据,动态生成input,数据获取成功后 this.$refs.from.submit(),看起来是没有什么问题,但自动提交的时候并没有带获取到的数据过去,原因可能是时间问题?有待深究…
失败方案 二:οnsubmit="return submitBefore() ,此方法为submitBefore返回true时执行提交,返回false时不执行提交,这样就可以在form默认提交前做想做的事情了,有问题吗?没有,拿到普通的html代码中跑一遍,杠杠的,然而在vue里不行…
失败方案 三:button不用submit,绑定一个ok事件,在事件里new FormData ,然后添加数据进去,用axios请求,然后,不行哦,原因你们懂得…
总之这个问题有待深究,下次再更(不知道有没有下次。。。。)
更多推荐
所有评论(0)