How to use ajax to request server data in WeChat applet

This article mainly introduces the WeChat applet ajax to implement the functions of requesting server data and template traversing data. It analyzes the operation skills related to the WeChat applet ajax call and template wx:for loop list rendering in the form of examples. Friends in need can refer to it. Next

The example in this article describes the WeChat applet ajax implementation of requesting server data and template traversal data functions. I would like to share it with you for your reference. The details are as follows:

Yesterday I downloaded the developer tool of a WeChat applet, briefly read the documentation, and simply used his method to implement the ajax request.

WeChat applet document address:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl

The header title and bottom tab configuration are both in the app.json file. There are at least two and at most five tab positions at the bottom . The following is the app.json file code and related comments

{
 "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"
 }
}

Here I implement ajax request for server data through the WeChat applet wx.request. There can be up to five of these in one program. ask. The following is the code of 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
   }
  })
 }
})

The return data format of http://xx.xxxxx.com/xxx.php is a json, the format is as follows

Displaying the page is simple, variables {{array}} WeChat template traverses data using wx:for. The index.wxml code is as follows:

<!--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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use fs.rename in node.js to implement forced renaming

Connect to any database through javascript

An error occurred when loading the path in laydate.js

How to implement route parameter passing in vue-router

The above is the detailed content of How to use ajax to request server data in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!