彭彭
彭彭
  • 发布:2019-06-04 10:17
  • 更新:2020-09-18 14:12
  • 阅读:9136

如何手动触发form表单提交,form表单支持直接post提交数据到action里面去吗

分类:uni-app

我现在是点击然后获取form表单的所有数据,然后获取到数据之后js手动触发form表单提交。请问这个怎么做啊,我js手动 click,submit都没用

2019-06-04 10:17 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

uni-app的form是没有action属性的(文档:https://uniapp.dcloud.io/component/form),提交会触发submit事件,数据需要自己使用uni.request上传到服务器

1***@qq.com

1***@qq.com - jun

做paypal支付遇到相同的问题,打算也是写一个独立的index.html 用webview 去提交表单了。
评论里提及到request提交的,可能没get到作者意思和遇到的麻烦了

彭彭

彭彭 (作者)

我现在可以触发表单提交了,可是怎么没有调转到form绑定的那个action的链接去啊。。我是post提交。
uni-app的form有action这个吗,不然他提交时提交到哪里去啊。求大神解答。。。

彭彭

彭彭 (作者)

是不是uni里面的form不能post模拟表单提交到指定的链接里面
后台要求form表单提交。不能用request提交。

  • DCloud_UNI_GSQ

    使用request提交,header['content-type'] 设置为 application/x-www-form-urlencoded即可

    2019-06-11 15:20

2***@qq.com

2***@qq.com

用formData对象放数据,request提交就好了,
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

  • 彭彭 (作者)

    request提交到哪里去,提交到action那个链接吗,可是那个是个第三方的链接,直接提交存在跨域问题,提交不了啊

    2019-06-04 16:49

  • DCloud_UNI_GSQ

    回复 彭彭: 跨域问题找跨域问题的解决方式

    2019-06-11 15:18

seho20001123

seho20001123 - 菜鸟一个

用request提交,模拟一下

我贴一下具体的request代码;

/**

  • 封装请求的接口
    */

import axios from "axios"
import storage from "good-storage"

export default function request(url, params) {
// 获取token
return new Promise((resolve, reject) => {
axios({
method: "post",
url,
data: params,
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
"yq-user-token": storage.session.get("shopToken")
}
}).then(res => {
if (res.data.code == 200) {
resolve(res.data.data)
}
if (res.data.msg == "you need login") {
// token失效,跳转到login页面重新登录
this.$message.error('您未登录或登录状态因为时间过长而失效');
// 跳转
this.$router.push({
path: "/login"
})
}
})
.catch(function (error) {
console.log(error);
});
})
}

传递具体对象即可

  • 彭彭 (作者)

    他不能用request提交,要用form,没有接口 是一个第三方的

    2019-06-04 14:24

  • seho20001123

    回复 彭彭: 这个就是模拟form表单的,这个提交过去就是form-data格式,跟表单性质一样的,主要是核心代码


    transformRequest: [function (data) {

    let ret = ''

    for (let it in data) {

    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'

    }

    return ret

    }],

    2019-06-04 14:34

  • 彭彭 (作者)

    回复 seho20001123: 那url写哪个,写form表单的那个action的值,那是第三方的,如果直接发送数据存在跨域问题?

    2019-06-04 15:04

彭彭

彭彭 (作者)

form表单为什么不能做成跟普通的原生form一样可以直接post跳转的啊,

  • DCloud_UNI_GSQ

    使用web-view组件

    2019-06-11 15:18

  • 彭彭 (作者)

    回复 DCloud_UNI_GSQ: 嗯 当时已经用web-view组件解决了

    2019-06-11 15:57

  • Gaoswatou

    回复 彭彭: 用webview怎么处理呢?求大佬指点一下

    2019-08-01 11:28

  • 彭彭 (作者)

    回复 Gaoswatou: 把你那个要用from的那个页面用html写 就能用form提交了,把他放到服务器上 然后uni里面用web-view跳转到服务器的地址就行了

    2019-08-01 17:46

  • 1***@qq.com

    回复 彭彭:如果我要传给第三方的参数是后台传给我的,那怎么整?可以uniapp直接传参给web-view吗

    2019-09-02 19:33

8***@qq.com

8***@qq.com - 我是测试

web-view如何接来自uniapp的数据啊

  • 彭彭 (作者)

    @message 你也可以直接拼接再web-view的url上 应该可以

    2020-06-04 15:30

该问题目前已经被锁定, 无法添加新回复