vue form表单提交动态数据

it2022-05-05  100

项目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)