小程序ajax服务器交互及页面渲染怎么实现?

　　小程序ajax服务器交互及页面渲染怎么实现?各位微信小程序开发者们，如果你要实现小程序ajax服务器交互及页面渲染。那么可以往下看看小编整理的内容哦，以下内容供大家参考哦。

　　小程序ajax服务器交互及页面渲染怎么实现?

　　请求是按照微信官方给出的,wx.request

　　在这里，我的逻辑是：点击按钮---》根据绑定的事情注册函数--》发起微信请求--》判断是否返回数据，成功返回数据则显示请求成功。--》返回数据到前端页面进行渲染

　　废话不多说，直接上微信小程序代码：

　　一、前端页面代码：

　　解释：

　　(1)此处的button绑定onRequest事件，当点击button时候，触发该事件。

　　(2)下面的view 主要是渲染request请求之后的数据，利用wx:for 来进行循环输出.

　　(3)需要注意，我们此处用的是带微信小程序滚动效果的：scroll-view，同时scroll-y="true" 代表是竖向滚动。

　　二、微信小程序JS代码：

　　解释：

　　(1)list是我们等下要输入的内容，因此需要在data中体检申明

　　(2)onload函数在此处很重要。页面加载完成之后，调用了onrequest()函数，这样是为了渲染数据。重置要求

　　必须使用that.setData，这里的that需要用：var that = this来申明。

　　(3)当点击Button按钮的时候，onRequest函数出发。此时请求url，并返回数据。当返回的数据存在时，走success方法。

　　(4)此时，赋值list :date，相当于给list赋值，可用于wxml页面进行数据渲染。

　　(5)nextPage即为页面滚动函数。当下拉触底时，触发该小程序函数

　　(6)此处的url为豆瓣的一个查看电影的url，可以直接借用的。

　　效果图：

　　三、碰到的问题：

　　1、报错：微信小程序开发-网络请求报Invalid

　　request 400错误：

　　原因：最新版的参数和以前的不同，把微信小程序数据格式换一换。

　　// 'content-type': 'application/json'

　　'Content-Type': 'json'

　　2、请求中的get,post必须要大写

　　3、如果出现找不到页面的情况，可能是app.json中，你的引入页面顺序问题。有的页面的js没有page()函

　　数，造成页面未定义

　　以上就是小程序ajax服务器交互及页面渲染怎么实现的内容了哦，感谢各位亲们的观看，以上全部内容供各位亲们参考，希望以上内容对大家会有帮助哦。大家请多多的关注微小乔哦。

　　微信小程序调用方法，微信小程序接口调用方式实例

　　小程序template循环调用不了怎么办?

　　微信小程序js全局判断和js调用方法