微信小程序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代码如下：

<!--index.wxml-->  <view class="container">   <view bindtap="bindViewTap" class="userinfo">    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>    <text class="userinfo-nickname">{{userInfo.nickName}}</text>   </view>  </view>  <view wx:for="{{Industry}}" wx:ket="{{index}}">    {{index}}：{{item.name}}  </view>

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

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

微信小程序如何使用action-sheet弹出底部菜单

以上就是微信小程序ajax实现请求服务器数据实例的详细内容，更多内容请关注技术你好其它相关文章！