微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图
微信小程序开发交流qq群 173683895 、 526474645 ;
承接微信小程序开发。扫码加微信。
为了方便大家,下面列出微信请求服务器常用的几种方式,并附上代码和注释。
一: 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的代码和上面的一样,这里就不重复贴代码了
formSubmit: function (e) {var adds = e.detail.value;adds .openid = 11;wx.request({url: '',data: adds,method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: {// 设置请求的 header'content-type': 'application/x-www-form-urlencoded'},success: function (res) {console.log(JSON.stringify(res.data))}fail: function (res) {console.log('cuowu' + ':' + res)}})},
//四:上传图片并且把图片展示出来
先贴上效果图:
//这里也很简单,直接上完整代码,
<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出来如下图就证明上传成功了
微信小程序服务器请求和上传数据,上传图片并展示,提交表单完整实例代码附效果图相关推荐
- 微信小程序request请求动态获取数据
微信小程序开发文档链接 1 后台代码: clickButton:function(){var that = this;wx.request({url: 'http://localhost:9096/a ...
- 微信小程序post请求Python Flask数据
1.微信小程序端: (1)index.js //index.js //获取应用实例 const app = getApp()Page({data: {motto: '检测结果:',value: '0' ...
- ajax使用pur请求怎么传参,jQuery使用ajaxSubmit()提交表单示例
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码 代码如下: 那么,如何通过ajaxSubmit ...
- 微信小程序云开发上传数据到云数据库
实现功能:实现对数组数据的动态更改,并能通过for循环,上传一整组数据到云数据库 代码: 1.wxml代码 <view ><view>运动症状</view> < ...
- 微信小程序之版本管理和上传到仓库
目录 本文的除了上传git其他都复制微信官方文档 1.本地管理 1.1.提交工作区的修改 1.2.查看历史 1.3.查看文件修改历史 1.4.检出和创建分支 2.上传到gitee 2.1.首先你要有一 ...
- 微信小程序 解决请求服务器手机预览请求不到数据的方法
微信小程序 解决请求服务器手机预览请求不到数据的方法 微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
- php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...
- 微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器 微信小程序中实现上传视频的开发代码 易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
- 微信小程序如何请求数据
微信小程序呢不存在ajax,那么它是如何实现数据请求功能的呢? 在微信官方文档中提供了API的调用wx.request()来请求数据 在数据请求之前,我们需要把微信小程序数据请求的坑过一遍 1:微信小 ...
- 微信小程序媒体文件上传到微信服务器
微信小程序媒体文件上传到微信服务器官方给出的事例如下: curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/up ...
最新文章
- android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
- mysql 时间日期类型 datetime、timestamp、date、time、year
- [转]我们为什么需要工作流
- 工程打包是什么意思_承包工程是什么意思
- 【Java8】@FunctionalInterface
- python 实现感知器(一)
- mysql的安装胚子_下列哪个制剂是以主要药味缩写加剂型的原则命名的
- posix thread线程
- linux 2.6内核进程调度,Linux2.6内核进程调度系列--scheduler_tick()函数2.更新实时进程的时间片,...
- Hbase ImmutableBytesWritable数据类型
- redis双写一致性问题
- 中国光谷·“华为杯”第十九届中国研究生数学建模竞赛LaTeX模版
- 软件测试前景和发展方向
- 磨刀不误砍柴工——VS生成事件
- 流量复制导流工具研究
- 00后表示真干不过,部门新来的00后测试员已把我卷崩溃,想离职了...
- matlab使用solve求解二元二次方程组
- 自动驾驶感知——视觉感知经典算法
- 李宏毅机器学习|Task02
- jsp内置对象的方法调用无效报错
热门文章
- iOS前后台切换和监听
- Android中 dip 和 px 的关系
- 人工智能谓词逻辑——猴子摘香蕉问题
- python中bin的意思_python中bin函数的使用方法
- c++类名加取地址符怎么理解
- CorelDraw手表实例实操作让你全面了解技术的综合应用
- 计算机找不到ac97前面板怎么办,Win7前面板没有声音的解决方法(声卡设置+前面板插线)...
- c语言题目关于欧姆定律,电压_电流_电阻_欧姆定律计算含答案.doc
- 如何打出日语中的叠字符号「々」
- python求解中位数、均值、众数