微信小程序之GET请求的实例详解,微信小程序a

来源:http://www.smjxgs.com 作者:4887王中王鉄算盘奖结果 人气:52 发布时间:2019-08-09
摘要:关于ajax网络请求的封装实例,ajax封装实例 实例代码: // 封装的ajax网络请求函数// obj 是一个对象function AJAX(obj){ //跨域请求 if (obj.dataType == "jsonp") { //在这里 callback 必须是全局变量 保证

关于ajax网络请求的封装实例,ajax封装实例

实例代码:

// 封装的ajax网络请求函数
// obj 是一个对象
function AJAX(obj){


    //跨域请求
    if (obj.dataType == "jsonp") {
      //在这里 callback 必须是全局变量 保证函数消失的时候 这个变量不可以被销毁

      //处理一下函数名(防止多个网络请求 函数名字相同 出现紊乱的情况)
      var hehe = "callBack"   "_"   new Date().getTime()   "_"   String(Math.random()).replace(".","");
      window[hehe] = obj.success;
      //创建 script标签
      var sc = document.createElement("script");
      sc.src = obj.url   "?"   "cb="   hehe;
      console.log(sc.src);
      document.body.appendChild(sc);
      document.body.removeChild(sc);
      return;
    }





//1、创建 ajax 对象
  var ajaxObj = null;
  if (window.XMLHttpRequest) {
    ajaxObj = new XMLHttpRequest();
  }else{
    ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
  }


  //设置请求的类型
  obj.type = obj.type.toUpperCase() || "GET";

  //如果是get请求 并且需要传递参数 则需要给 url 后面拼接参数
  if (obj.type == "GET") {
    var arr = [];//定义数组 用于把对象存储到数据里面
    for (var key in obj.data) {
      arr.push(key  "="  obj.data[key]);
    }
    //用&分隔数组 让其转化为类似:name=lxl&age=18 的形式
    var str = arr.join("&");
    obj.url = obj.url  "?"  str;
    //拨号
    ajaxObj.open(obj.type,obj.url,true);


    //发送"name=123&age=18"
    ajaxObj.send();
  }else{
    var arr = [];//定义数组 用于把对象存储到数据里面
    for (var key in obj.data) {
      arr.push(key  "="  obj.data[key]);
      //console.log(arr);
    }
    //用&分隔数组 让其转化为类似:name=lxl&age=18 的形式
    var str = arr.join("&");
    //console.log(str);
    ajaxObj.open(obj.type,obj.url,true);
    ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajaxObj.send(str);
  }



  //监听
  ajaxObj.onreadystatechange = function(){

    if (ajaxObj.readyState == 4) {
      if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) {
        //请求成功
        obj.success(ajaxObj.responseText);
      }else{
        //请求失败
        obj.error(ajaxObj.status);
      }
    }

  }

}

以上这篇关于ajax网络请求的封装实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

实例代码: // 封装的ajax网络请求函数// obj 是一个对象function AJAX(obj){ //跨域请求 if (obj.dataType...

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
 onLoad: function () {
  var that = this
  wx.request({
   url: 'http://apis.baidu.com/heweather/weather/free',
   data: {city:'beijing'},
   method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
   header: {apikey:'a37c01591e47494fe320137dbc0fd423'}, // 设置请求的 header
   success: function(res){
    // success
    console.log(res)
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })
 }
})

微信小程序文档地址:

4887王中王鉄算盘奖结果 1

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

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

4887王中王鉄算盘奖结果 2

学习前端的人应该都会使用ajax的get请求数据,那么在微信小程序里怎样实现get请求呢?下面我就给大家演示一下简单的get请求

您可能感兴趣的文章:

  • 微信小程序实现移动端滑动分页效果(ajax)
  • 微信小程序使用request网络请求操作实例
  • 微信小程序之GET请求的实例详解
  • 微信小程序 POST请求的实例详解
  • 微信小程序request请求后台接口php的实例详解
  • 微信小程序 wx.request(OBJECT)发起请求详解
  • 微信小程序 http请求封装详解及实例代码
  • 微信小程序 网络请求(post请求,get请求)
  • 微信小程序 封装http请求实例详解
  • 微信小程序用户自定义模版用法实例分析
  • 详解微信小程序入门五: wxml文件引用、模版、生命周期
  • 微信小程序 定义全局数据、函数复用、模版等详细介绍

注意:一个微信小程序,同时只能有5个网络请求连接。

//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
   }
  })
 }
})

您可能感兴趣的文章:

  • 微信小程序实现移动端滑动分页效果(ajax)
  • 微信小程序使用request网络请求操作实例
  • 微信小程序 POST请求的实例详解
  • 微信小程序request请求后台接口php的实例详解
  • 微信小程序 wx.request(OBJECT)发起请求详解
  • 微信小程序 http请求封装详解及实例代码
  • 微信小程序 网络请求(post请求,get请求)
  • 微信小程序 封装http请求实例详解
  • 微信小程序用户自定义模版用法实例分析
  • 详解微信小程序入门五: wxml文件引用、模版、生命周期
  • 微信小程序 定义全局数据、函数复用、模版等详细介绍
  • 微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能。分享给大家供大家参考,具体如下:

先上代码:

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

 其实观察代码不难发现,写法和ajax形同相似,只要我们搞清楚需要配置哪些参数就可以了。下面是来自官方的配置信息。

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

4887王中王鉄算盘奖结果 3

希望本文所述对大家微信小程序开发有所帮助。

微信小程序之GET请求的实例详解

其中

得到的结果展示:

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

4887王中王鉄算盘奖结果,头部标题和底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个。下面是app.json文件代码和相关注释

4887王中王鉄算盘奖结果 4

昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求。

本文由4887王中王鉄算盘奖结果发布于4887王中王鉄算盘奖结果,转载请注明出处:微信小程序之GET请求的实例详解,微信小程序a

关键词:

最火资讯