本文南京小程序开发公司阐述了微信小程序的提交表单操作。分享供您参考,如下:
表单组件也存在于Wechat小程序中。bindsubmit属性可用于触发表单中数据的提交事件。鞋带的参数如下:
event.detail = {value : {'name': 'value'} , formId: ''}
与普通网页一样,该名称需要上传以形成组件,例如输入以设置名称属性,其中表单传递参数,使用名称作为键。
提交操作由<button />组件控制,其表单类型以<form />形式提交,如下所示:
<button form-type= "submit" class='search'> <span> start calculation </span> </button>
单击此按钮时,将触发绑定绑定的JS文件中的事件,例如:
<form bindsubmit="formSubmit" bindreset="formReset">
<input type="text" name="price"/>
<button form-type= "submit" class='search'> <span> start calculation </span> </button>
</form>
在这里,单击此按钮调用JS中的formSubmit并可以在formSubmit事件e.detail.value.price中使用JS中的表单Submit定义如下:
formSubmit: function (e) {
this.setData({
Price: E. detail. value. price, // with E. detail. value. price, get the value of the name as the price component in the form and assign it to the price variable defined in the JS file data
})
Var that = this; // In the success section, this is invalid. You need to assign this to that first, and call that instead of this, such as: that. setData ({})
Wx. request ({// completes information exchange using wx. request provided by wechat)
Url: config. service. XXXX, // URL value is uniformly defined in configuration. js, var config = require ('. /. / config') at the beginning of this js; introduced
header: {
"Content-Type": "Application/x-www-form-urlencoded"//Pass parameters using form
},
method: "POST",
dataType:"json",
Data: Util. json2Form ({price: this. data. price}), /// The data to be delivered is converted to annotated form data format using json2Form in util. JS
Success: function (res) {//res is the data returned and success is the execution part after the response is successful
Console. log (res. data) // Display the data carried in Res
},
Complete: function (res) {// complete is similar to final and must be executed at last
If (res == null | res. data == null) {// If the return value is empty, the network request is prompted to fail
Console. error ('network request failed');
return;
}
}
})
},
util.js的内容:
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格式传输数据,但个人背景不用于处理JSON文件。
本文地址:
http://www.njanyou.cn/web/2509.html
Tag:
专业服务:
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话:025-65016872
上一篇:
如何快速构建域权限
下一篇:
承包和建筑行业网站 - 需要关注的重点