项目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请求,然后,不行哦,原因你们懂得…
总之这个问题有待深究,下次再更(不知道有没有下次。。。。)

Logo

前往低代码交流专区

更多推荐