您当前的位置: 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
uniapp如何發送formdata數據給後端(深層次的object可以參考使用)
发布时间:2022-01-14 00:17:25编辑:雪饮阅读()
最近啊,一個前端妹子竟然抱怨formdata發送一個對於我們php後端來説是一種關聯數組的數據格式很麻煩。哥這心裏就有點冤屈了,我用ajax直接把一個object放進去后只要是post請求,則自動就以formdata方式傳入我們php後端,php接收到后自動就拿到了關聯數組(不確定原生php是否這樣,這裏有用thinkphp5).於是我就和前端妹子說了用ajax,當然ta們前端現在比較流行uniapp,所以貌似她不太情願。算了,最後我又寫了一個接口單獨給她是以json形式接收的。但是這裏最后我還是不放棄,自己也研究了下uniapp發送formdata,的確是uniapp不太友好,但是怎麽發送還是懂了。實例如:
App.vue:
<script>
export default {
methods:{
paramsToFormData(context,obj,str){
Object.keys(obj).forEach(function(item,index,arr){
//console.log("item",item);
//str+=item;
if(Object.keys(obj[item]).length>0){
str+="["+str+"]";
str+=context.paramsToFormData(context,obj[item],str);
}
else{
str+=item+"&";
}
});
return str;
},
},
onLaunch: function() {
var data="setting[voice][oil_gun_number]=2&setting[voice][preferential_amount]=2";
uni.request({
url: 'https://shengke.kasumi.com//api/app/oil_gun/setting.html', //仅为示例,并非真实接口地址。
data:data,
method:"post",
header: {
'Content-type':'application/x-www-form-urlencoded' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
this.text = 'request success';
}
});
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
关键字词:uniapp,formdata,object