【微信】微信小程序前后端数据请求示例

本篇内容简介之微信小程序的前后端数据交互示例，主要涉及到获取服务端的数据，和提交到服务端的数据演示，服务端使用java-springboot进行快速搭建演示

1、在小程序中的index.wxml中进行一个表单的设计

例如：

说明一下wxml页面中部分代码的意思：

1)、{{ }} 是代表表达式的数据绑定，可以从js中或者服务器端来通过类似key-value的形式进行自动的赋值操作

2)、wx:for 用于根据给定的数组重复渲染该组件，在该标签内可以使用item表示数组的当前项

3)、wx:key 指定标识比如这里指定的是以value为唯一的标识

页面样式如：

2、编写服务端代码

我这里以springboot为例，拼接的为演示数据，真实情况如何获取数据视情况而定

这里以map的形式填写数据，最终返回的是JSON字符串数据（真实情况可以以面向对象的方式进行对象的封装，然后操作对象进行数据的交互）

3、回到微信开发者工具中，在页面级的js文件中的onLoad事件的方法中，加入以下代码

由于在success回调方法后this的指向发生了变化，则首先使用一个that变量进行的保存

调用setData将返回值直接传送到页面进行渲染

4、刷新小程序端结果如下：

下面演示POST提交方法

1、在页面级的js中加入按钮的点击方法实现

此处截取段小程序开发文档中的说明：

2、在服务端书写获取数据代码

页面

看前后端结果

服务器端console输出:

微信开发工具console输出:

刚开始学习，不完善的地方请多指教

【微信】微信小程序前后端数据请求示例相关推荐

微信小程序前后端数据交互
目录一微信小程序发送请求二后端接口接受小程序请求并返回数据三最后的效果图先简单说一下我写的这个危险小程序前后端交互的业务,主要是两个数据:supplyCount和wantBuyCount ...
微信小程序前后端交互案例
微信小程序前后端交互案例首先声明一下,本人也是一个初学者(下面的案例可能会有很多不完整或说的不正确的,所以只能起到参考作用,千万不要拿我的话当标准). 我是纯自学,之前在前后端交互方面一直搞不懂,所 ...
【微信小程序】网络数据请求
目录一.小程序中网络数据请求的限制二.配置request合法域名三.发起GET请求四.发起POST请求五.在页面刚加载时请求数据六.跳过request合法域名校验七.关于跨域和Ajax的 ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
实验室预约管理小程序前后端完整，包括实验室动态，实验室规章制度，预约审批，用户管理，基础实验室预约，专业实验室预约等功能
功能介绍实验室预约管理小程序前后端完整,包括实验室动态,实验室规章制度,预约审批,用户管理,基础实验室预约,专业实验室预约等功能.目前部分高校实验室存在设备管理困难的问题,要使用设备可能需要在微信群 ...
极致CMS百度智能小程序前后端源码
安装说明 1.上传"小程序模板.zip"压缩包到网站根目录,解压安装极致CMS内容管理系统. 2.将"极致CMS百度小程序源码-前端"解压到电脑桌面,用&quo ...
最新二开南风表情包小程序+前后端去授权版/最火表情包小程序源码
最新二开南风表情包小程序+前后端去授权版,最火表情包小程序源码,本站之前发布过一套原始版的<南风表情包源码>,本次分享的是一套二开的小程序前端,新增了举牌表情生成.去掉了隐藏的授权以及一些 ...
最新表情包小程序+前后端去授权版/最火表情包小程序源码
最新表情包小程序+前后端去授权版,最火表情小程序源码,本次分享的是一套二开的小程序前端,新增了举牌表情生成.去掉了隐藏的授权以及一些BUG修复,本站亲测完美可用. 具体教程见包内说明,以下是亲测截图: ...
健身类小程序前后端源码
简介: 健身类小程序前后端源码环境要求: PHP >= 7.0 (推荐7.2+) Laravel 5.6+ 安装步骤: 安装PHP环境(请自行百度) 将源码上传到 web 目录参考 Lara ...

【微信】微信小程序前后端数据请求示例

【微信】微信小程序前后端数据请求示例相关推荐

最新文章

热门文章