微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
来源:互联网 发布:java bean json 编辑:程序博客网 时间:2024/05/22 00:22
最近因公司需要开发小程序,为了自己和大家的方便,下面列出常用的微信请求服务器的几种方式,并附上代码和注释。估计会有人吐槽我啰嗦,没办法,为了新接触微信小程序的小伙伴能够更好的理解。希望大家谅解。还有什么不懂的可以在下方留言或者加入微信小程序开发交流群(173683895)
一: GET请求(最常用的)
wx.request({
url: 'https://URL', //这里''里面填写你的服务器API接口的路径
data: {}, //这里是可以填写服务器需要的参数
method: 'GET', // 声明GET请求
// header: {}, // 设置请求的 header,GET请求可以不填
success: function(res){
console.log("返回成功的数据:" + res.data ) //返回的会是对象,可以用JSON转字符串打印出来方便查看数据
console.log("返回成功的数据:"+ JSON.stringify(res.data)) //这样就可以愉快的看到后台的数据啦
},
fail: function(fail) {
// 这里是失败的回调,取值方法同上,把res改一下就行了
},
complete: function(arr) {
// 这里是请求以后返回的所以信息,请求方法同上,把res改一下就行了
}
})
二:POST请求(我主要用于上传数据的时候用)
基本和GET比较类似,需要注意的两个地方请看注释。
var that = this //创建一个名为that的变量来保存this当前的值
wx.request({
url: '',
method: 'post',
data: {
openid: 'openid' //这里是发送给服务器的参数(参数名:参数值)
},
header: {
'content-type': 'application/x-www-form-urlencoded' //这里注意POST请求content-type是小写,大写会报错
},
success: function (res) {
that.setData({ //这里是修改data的值
test: res.data //test等于服务器返回来的数据
});
console.log(res.data)
}
});
三:表单提交(这种方式也比较常用,方法也比较多样)
直接上代码,你没看错,表单提交就是这么简单。
1.使用GET的方式提交表单:
//index.wxml
<form bindsubmit="formSubmit" bindreset="formReset">
<input type="text" class="input-text" name="username" placeholder="请输入账号" />
<input type="text" class="input-text" name="password" placeholder="请输入密码" />
<button formType="submit">提交</button>
</form>
//index.js
formSubmit: function (e) {
var that = this;
var formData = e.detail.value; //获取表单所有input的值
wx.request({
url: '',
data: formData,
header: { 'Content-Type': 'application/json' },
success: function (res) {
console.log(res.data)
}
})
},
//2.使用POST的方式提交表单,index.wxml的代码和上面的一样,这里就不重复贴代码了
//index.wxss
.page{
background: lavender;
height: 1303rpx
}
.title {
margin-left: 5px;
vertical-align: middle;
padding: 10rpx 10rpx 10rpx 20rpx;
font-size: 35rpx;
color: #818a8f;
}
.titles {
vertical-align: middle;
padding: 0rpx 0rpx 0rpx 0rpx;
font-size: 35rpx;
color: #818a8f;
}
.section1 { border: 2px solid #a1a1a1; margin: 10px 10px 15px 5px; height: 60rpx;}.section2 { border: 2px solid #a1a1a1; height: 165rpx; width: 90%; margin: 10px 10px 15px
5px;}
.plus { margin: 10px 10px 15px 5px; height: 120rpx; width: 120rpx;}.btn{ background: #b3d4db; margin: 60rpx 5px 5px 5px;}
<form bindsubmit="formSubmit" id='2' bindreset="formReset">
<input style='display:none' name='program_id' value='{{program_id}}'></input>
<view class='caigou_centent'>描述说明(选填)</view>
<textarea class='textarea' placeholder="" name="content" value='{{formdata}}' />
<view class="big-logos">
<image bindtap="upimg" src='../../images/jia.png'></image>
<block wx:for="{{img_arr}}">
<view class='logoinfo'>
<image src='{{item}}'></image>
</view>
</block>
</view>
<button class='btn' formType="submit">发布</button>
</form>
js
var adds = {};
Page({
data: {
img_arr: [],
formdata: '',
},
formSubmit: function (e) {
var id = e.target.id
adds = e.detail.value;
adds.program_id = app.jtappid
adds.openid = app._openid
adds.zx_info_id = this.data.zx_info_id
this.upload()
},
upload: function () {
var that = this
for (var i=0; i < this.data.img_arr.length; i++) {
wx.uploadFile({
url: 'https:***/submit',
filePath: that.data.img_arr[i],
name: 'content',
formData: adds,
success: function (res) {
console.log(res)
if (res) {
wx.showToast({
title: '已提交发布!',
duration: 3000
});
}
}
})
}
this.setData({
formdata: ''
})
},
upimg: function () {
var that = this;
if (this.data.img_arr.length<3){
wx.chooseImage({
sizeType: ['original', 'compressed'],
success: function (res) {
that.setData({
img_arr: that.data.img_arr.concat(res.tempFilePaths)
})
}
})
}else{
wx.showToast({
title: '最多上传三张图片',
icon: 'loading',
duration: 3000
});
}
一: GET请求(最常用的)
wx.request({
url: 'https://URL', //这里''里面填写你的服务器API接口的路径
data: {}, //这里是可以填写服务器需要的参数
method: 'GET', // 声明GET请求
// header: {}, // 设置请求的 header,GET请求可以不填
success: function(res){
console.log("返回成功的数据:" + res.data ) //返回的会是对象,可以用JSON转字符串打印出来方便查看数据
console.log("返回成功的数据:"+ JSON.stringify(res.data)) //这样就可以愉快的看到后台的数据啦
},
fail: function(fail) {
// 这里是失败的回调,取值方法同上,把res改一下就行了
},
complete: function(arr) {
// 这里是请求以后返回的所以信息,请求方法同上,把res改一下就行了
}
})
二:POST请求(我主要用于上传数据的时候用)
基本和GET比较类似,需要注意的两个地方请看注释。
var that = this //创建一个名为that的变量来保存this当前的值
wx.request({
url: '',
method: 'post',
data: {
openid: 'openid' //这里是发送给服务器的参数(参数名:参数值)
},
header: {
'content-type': 'application/x-www-form-urlencoded' //这里注意POST请求content-type是小写,大写会报错
},
success: function (res) {
that.setData({ //这里是修改data的值
test: res.data //test等于服务器返回来的数据
});
console.log(res.data)
}
});
三:表单提交(这种方式也比较常用,方法也比较多样)
直接上代码,你没看错,表单提交就是这么简单。
1.使用GET的方式提交表单:
//index.wxml
<form bindsubmit="formSubmit" bindreset="formReset">
<input type="text" class="input-text" name="username" placeholder="请输入账号" />
<input type="text" class="input-text" name="password" placeholder="请输入密码" />
<button formType="submit">提交</button>
</form>
//index.js
formSubmit: function (e) {
var that = this;
var formData = e.detail.value; //获取表单所有input的值
wx.request({
url: '',
data: formData,
header: { 'Content-Type': 'application/json' },
success: function (res) {
console.log(res.data)
}
})
},
//2.使用POST的方式提交表单,index.wxml的代码和上面的一样,这里就不重复贴代码了
//index.wxss
.page{
background: lavender;
height: 1303rpx
}
.title {
margin-left: 5px;
vertical-align: middle;
padding: 10rpx 10rpx 10rpx 20rpx;
font-size: 35rpx;
color: #818a8f;
}
.titles {
vertical-align: middle;
padding: 0rpx 0rpx 0rpx 0rpx;
font-size: 35rpx;
color: #818a8f;
}
.section1 { border: 2px solid #a1a1a1; margin: 10px 10px 15px 5px; height: 60rpx;}.section2 { border: 2px solid #a1a1a1; height: 165rpx; width: 90%; margin: 10px 10px 15px
5px;}
.plus { margin: 10px 10px 15px 5px; height: 120rpx; width: 120rpx;}.btn{ background: #b3d4db; margin: 60rpx 5px 5px 5px;}
//四:上传图片并且把图片展示出来
先贴上效果图:
<form bindsubmit="formSubmit" id='2' bindreset="formReset">
<input style='display:none' name='program_id' value='{{program_id}}'></input>
<view class='caigou_centent'>描述说明(选填)</view>
<textarea class='textarea' placeholder="" name="content" value='{{formdata}}' />
<view class="big-logos">
<image bindtap="upimg" src='../../images/jia.png'></image>
<block wx:for="{{img_arr}}">
<view class='logoinfo'>
<image src='{{item}}'></image>
</view>
</block>
</view>
<button class='btn' formType="submit">发布</button>
</form>
js
var adds = {};
Page({
data: {
img_arr: [],
formdata: '',
},
formSubmit: function (e) {
var id = e.target.id
adds = e.detail.value;
adds.program_id = app.jtappid
adds.openid = app._openid
adds.zx_info_id = this.data.zx_info_id
this.upload()
},
upload: function () {
var that = this
for (var i=0; i < this.data.img_arr.length; i++) {
wx.uploadFile({
url: 'https:***/submit',
filePath: that.data.img_arr[i],
name: 'content',
formData: adds,
success: function (res) {
console.log(res)
if (res) {
wx.showToast({
title: '已提交发布!',
duration: 3000
});
}
}
})
}
this.setData({
formdata: ''
})
},
upimg: function () {
var that = this;
if (this.data.img_arr.length<3){
wx.chooseImage({
sizeType: ['original', 'compressed'],
success: function (res) {
that.setData({
img_arr: that.data.img_arr.concat(res.tempFilePaths)
})
}
})
}else{
wx.showToast({
title: '最多上传三张图片',
icon: 'loading',
duration: 3000
});
}
},
//Console出来如下图就证明上传成功了
阅读全文
3 0
- 微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
- ajax异步请求提交上传图片表单并预览图片
- ajax异步请求提交上传图片表单并预览图片
- 微信小程序上传图片(附后端代码)
- [微信小程序]真正实现聊天对话(文本,图片)的功能(完整代码附效果图)
- [微信小程序]手指触摸动画效果(完整代码附效果图)
- [微信小程序]星级评分和展示(详细注释附效果图)
- [微信小程序]转发(分享)和打电话功能,完整代码附效果图
- ajax 请求后台数据(及使用FormData对象提交表单及上传图片)
- 使用FormData表单数据对象提交表单及上传图片
- Http请求数据上传图片到服务器
- ios表单提交(多个参数)数据到服务器,上传图片AFNetWorking
- 使用formData对象提交表单并上传图片
- 单张图片上传表单提交
- 表单提交之上传图片
- [微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
- android上传图片到服务器,android的Activity和服务器那边的完整代码
- 上传图片之表单请求
- 第二周 汉诺塔
- Android事件分发的View的焦点捕捉事件
- Linux 使用gdb对c/c++代码进行调试
- 内存泄露与内存溢出
- matlab循环语句注意点
- 微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
- 无法找到调试信息
- 数据库的简单操作
- 51Nod 1009 数字1的数量
- 洛谷 1514 [NOIP2010]引水入城 bfs+贪心
- 函数式编程(3):函数式编程特性
- [Android UI]Fragment的管理:getFragmentManager和getSupportFragmentManager的使用区别
- Brexit Gym
- Java中字符串的那些事儿