微信小程序提交form操作示例
本文實(shí)例講述了微信小程序提交form操作。分享給大家供大家參考,具體如下:
在微信小程序中也存在form組件,bindsubmit這個(gè)屬性可以用于攜帶 form 中的數(shù)據(jù)觸發(fā) submit 事件,它鞋帶的參數(shù)形式如下:
event.detail = {value : {'name': 'value'} , formId: ''}
其中的name,和一般的網(wǎng)頁一樣,將需要上傳的input等表單組件設(shè)置name屬性,在這里,form傳遞的參數(shù),使用name作為一個(gè)key
提交動(dòng)作是由<form/> 表單中 formType 為 submit 的 <button/> 組件來控制的,示例如下:
<button form-type="submit" class='search'><span>開始計(jì)算</span></button>
當(dāng)點(diǎn)擊這個(gè)button時(shí),會(huì)觸發(fā)bindsubmit綁定的js文件中的事件,例如:
<form bindsubmit="formSubmit" bindreset="formReset"> <input type="text" name="price"/> <button form-type="submit" class='search'><span>開始計(jì)算</span></button> </form>
在這里,點(diǎn)擊這個(gè)button則會(huì)調(diào)用js中的formSubmit,同時(shí)在formSubmit事件中可以用e.detail.value.price
的方式獲取name為price的組件的value值,js中formSubmit的定義如下:
formSubmit: function (e) { this.setData({ price: e.detail.value.price, //用e.detail.value.price,獲取了form中name為price組件的value,賦值給js文件data中定義的price變量 }) var that = this; //在success部分,this失效,需要先將this賦值給that,通過調(diào)用that代替this比如:that.setData({}) wx.request({ //使用微信提供的wx.request完成信息交互 url: config.service.XXXX, //url的值統(tǒng)一定義在了configuration.js中,在本js開始時(shí)var config = require('../../config');引入 header: { "Content-Type": "application/x-www-form-urlencoded" //使用form方式傳遞參數(shù) }, method: "POST", dataType:"json", data: Util.json2Form({ price: this.data.price }), //將要傳遞的數(shù)據(jù)使用util.js中的json2Form轉(zhuǎn)為標(biāo)注的form數(shù)據(jù)格式 success: function (res) { //res是返回的數(shù)據(jù),success是響應(yīng)成功后執(zhí)行部分 console.log(res.data) //顯示res中攜帶的數(shù)據(jù) }, complete: function (res) { // complete類似finally,最后必然執(zhí)行 if (res == null || res.data == null) { //如果返回值為空,則提示網(wǎng)絡(luò)請(qǐng)求失敗 console.error('網(wǎng)絡(luò)請(qǐng)求失敗'); return; } } }) },
util.js的內(nèi)容:
function json2Form(json) { var str = []; for (var p in json) { str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p])); } return str.join("&"); } module.exports = { json2Form: json2Form, }
wx.request
也可以使用功能json格式傳輸數(shù)據(jù),但是個(gè)人后臺(tái)不太習(xí)慣處理json文件
希望本文所述對(duì)大家微信小程序開發(fā)有所幫助。
相關(guān)文章
lhgcalendar時(shí)間插件限制只能選擇三個(gè)月的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猯hgcalendar時(shí)間插件限制只能選擇三個(gè)月的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07JavaScript中表格文件導(dǎo)出的實(shí)現(xiàn)示例
本文主要介紹了JavaScript中表格文件導(dǎo)出的實(shí)現(xiàn)示例,JavaScript中的Blob對(duì)象和a標(biāo)簽的download屬性是實(shí)現(xiàn)這一功能的關(guān)鍵,本文就來詳細(xì)的介紹一下,感興趣的可以了解一下2024-01-01el-input限制輸入只允許輸入浮點(diǎn)型的解決思路
本文主要是記錄,el-input怎么限制輸入只允許輸入浮點(diǎn)型,注意是輸入的時(shí)候限制只允許輸入浮點(diǎn)型,而不是輸入完提交的時(shí)候再校驗(yàn)提示,感興趣的朋友跟隨小編一起看看吧2024-03-03js簡單實(shí)現(xiàn)點(diǎn)擊左右運(yùn)動(dòng)的方法
這篇文章主要介紹了js簡單實(shí)現(xiàn)點(diǎn)擊左右運(yùn)動(dòng)的方法,實(shí)例分析了javascript實(shí)現(xiàn)左右運(yùn)動(dòng)的相關(guān)要點(diǎn)與技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04