首页 > 其他分享 >uniapp表单提交 新增POST

uniapp表单提交 新增POST

时间:2022-11-27 16:33:08浏览次数:33  
标签:uniapp name url submit 表单 disabled uni POST data

用button的type=submit和form

<template>
<view>
<view class="info">
<form @submit='formSubmit'>
<view class="list">
<view class="item">
*姓名:<view><input class="inp" name="name" placeholder='请输入姓名' />
</view>
<view class="item">
*博客地址:<view><input class="inp" name="url" placeholder='请输入博客地址' />
</view>
...
</view>
<view class="button">
<button class="button-btn" v-if="disabled===false" form-type="submit">提交</button>
<button class="button-btn noFinished" v-else>提交</button>
</view>
</form>
</view>
</view>
</template>
<script>
data() {
return {
disabled: false,防止重复点击
}
},
onl oad() {
},
methods: {
formSubmit(e) {
let formData = e.detail.value;//获取表单内所有值
let data = {//要传递给接口的参数对象
name: form.name;//传递name字段 值为表单里input的name为name的值
url: form.url;//传递url字段 值为表单里input的name为url的值
};
this.disabled = true;//btn按钮禁止点击开启
//校验必填信息不为空 为空提示上传 都不为空调用submit函数
if(formData.name==='') {
uni.showToast({
title: '请输入姓名',
icon: 'none'
})
this.disabled = false;//btn按钮禁止点击关闭
} else if(formData.name==='') {
uni.showToast({
title: '请输入博客地址',
icon: 'none'
})
this.disabled = false;//btn按钮禁止点击关闭
} else if(.){...}
else {
this.submit(data);
}
},
submit(data) {
let _self = this;
console.log("data===",data);
this.$Request.post(this.$api.shop.warehouseEnterpriseApi,'POST',data).then(res =>{
if(res.data.code===1) {
uni.showToast({
title: '添加成功,等待审核',
icon: 'none',
durtion: 2000,
})
uni.setStorageSync("isHaveStore",true);//设置缓存
setTimeout(function(){//function访问不到this 用_self来访问外面的this
_self.$utils.jump('/pages/index/index','switchTab');
},2000)
}
},err =>{
console.log("err: ",JSON.string(err));
})
}
},
</script>

标签:uniapp,name,url,submit,表单,disabled,uni,POST,data
From: https://blog.51cto.com/u_15694202/5890197

相关文章