微信小程序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: #39;Hello World #39;,
 userInfo: {},
 Industry:{}
 onLoad: function (res) {
 var that = this
 //调用应用实例的方法获取全局数据
 app.getUserInfo(function(userInfo){
 //更新数据
 that.setData({
 userInfo:userInfo
 wx.request({
 url: #39;http://xx.xxxxx.com/xxx.php #39;,//上线的话必须是https，没有appId的本地请求貌似不受影响
 data: {},
 method: #39;GET #39;, // 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 >
相关推荐：

微信小程序request网络请求操作实例详解
微信小程序显示下拉列表功能的实现方法
微信小程序如何使用action-sheet弹出底部菜单
以上就是微信小程序ajax实现请求服务器数据实例的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！