微信小程序ajax服务器·,微信小程序ajax实现请求服务器数据实例

微信小程序ajax实现请求服务器数据实例,程序,数据,最多,遍历,代码

微信小程序ajax实现请求服务器数据实例

易采站长站，站长之家为您整理了微信小程序ajax实现请求服务器数据实例的相关内容。

昨天下载了一个微信小程序的开发者工具，大概看了一下文档，简单的用他的方法实现了ajax请求。本文主要介绍了微信小程序ajax实现请求服务器数据及模版遍历数据功能,结合实例形式分析了微信小程序ajax调用及模板wx:for循环列表渲染相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

头部标题和底部tab配置都在 app.json文件中，底部tab位最少两个，最多五个。下面是app.json文件代码和相关注释

{ "pages":[ "pages/index/index", "pages/tucao/tucao", "pages/center/center" ], "window":{ "backgroundTextStyle":"", "navigationBarBackgroundColor": "red", "navigationBarTitleText": "一个标题而已", "navigationBarTextStyle":"white" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "/images/public/menu-cd.png", "selectedIconPath": "/images/public/menu.png" },{ "pagePath": "pages/tucao/tucao", "text": "吐槽", "iconPath": "/images/public/hot-cd.png", "selectedIconPath": "/images/public/hot.png" },{ "pagePath": "pages/center/center", "text": "我的", "iconPath": "/images/public/center-cd.png", "selectedIconPath": "/images/public/center.png" }], "borderStyle": "white" }}

这里我是通过 微信小程序wx.request实现ajax请求服务器数据的，一个程序里面最多能有五个这样的请求。下面是index.js的代码

//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {}, Industry:{} }, onLoad: function (res) { var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) wx.request({ url: 'http://xx.xxxxx.com/xxx.php',//上线的话必须是https，没有appId的本地请求貌似不受影响 data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header success: function(res){ console.log(res.data.result) that.setData({ Industry:res.data.result }) }, fail: function() { // fail }, complete: function() { // complete } }) }})

其中http://xx.xxxxx.com/xxx.php的返回数据格式是一个json，格式如下

展示页面就简单了，变量{{array}} 微信模版遍历数据使用 wx:for 。index.wxml代码如下：{{userInfo.nickName}} {{index}}：{{item.name}}

相关推荐：

微信小程序request网络请求操作实例详解

微信小程序显示下拉列表功能的实现方法

微信小程序如何使用action-sheet弹出底部菜单以上就是关于对微信小程序ajax实现请求服务器数据实例的详细介绍。欢迎大家对微信小程序ajax实现请求服务器数据实例内容提出宝贵意见