微信小程序--ajax服务器交互及页面渲染

这篇是特意分开写的。网上找的帖子大多是直接在onload中请求数据。而我想实现的是点击按钮，然后请求服务器，接着返回数据，前端页面渲染。所以搞了挺久的，在此记录一下。

请求是按照微信官方给出的,wx.request 
在这里，我的逻辑是：点击按钮---》根据绑定的事情注册函数--》发起微信请求--》判断是否返回数据，成功返回数据则显示请求成功。--》返回数据到前端页面进行渲染 
废话不多说，直接上代码：

一、前端页面代码：

1. <view class="container2">
2.  
3. <view class="panel">
4.  
5. <label class="title">请输入查询内容</label>
6.  
7. <input class="inputarea"/>
8.  
9. <button bindtap='onRequest' type="primary" class="searBtn">查询</button>
10.  
11. </view>
12.  
13.  
14.  
15. <scroll-view class="article-list" style="height:500px" scroll-y="true" bindscrolltolower="nextPage">
16.  
17. <block wx:for="{{list}}">
18.  
19. <view class="list-item" index="{{index}}">
20.  
21. <view class="title">
22.  
23. <view class="title-name">{{item.title}}</view>
24.  
25. </view>
26.  
27. </view>
28.  
29. </block>
30.  
31.  
32.  
33. </scroll-view>>

解释：

（1）此处的button绑定onRequest事件，当点击button时候，触发该事件。  （2）下面的view 主要是渲染request请求之后的数据，利用wx:for 来进行循环输出.  （3）需要注意，我们此处用的是带滚动效果的：scroll-view，同时scroll-y="true" 代表是竖向滚动。

二、JS代码：

1. Page({
2.  
3. data: {
4.  
5. motto: '你懂我懂不懂',
6.  
7. list:[]
8.  
9. },
10.  
11. onload:function()
12.  
13. {
14.  
15. this.onRequest();
16.  
17. },
18.  
19. onRequest:function()
20.  
21. {
22.  
23. var that = this;
24.  
25. wx.request({
26.  
27. url: 'https://api.douban.com/v2/movie/top250',
28.  
29. method:"GET",
30.  
31. header: {
32.  
33. 'Content-Type': 'json'
34.  
35. },
36.  
37. success: function (res) {
38.  
39. console.log(res.data.subjects);
40.  
41. var date = res.data.subjects;
42.  
43. that.setData({
44.  
45. list: date
46.  
47. })
48.  
49. },
50.  
51. fail: function () {
52.  
53. console.log("接口调用失败");
54.  
55. }
56.  
57. })
58.  
59. },
60.  
61. nextPage:function()
62.  
63. {
64.  
65. console.log("下拉触发该函数");
66.  
67. },
68.  
69. //事件处理函数
70.  
71. bindViewTap: function () {
72.  
73. wx.navigateTo({
74.  
75. url: '../logs/logs'
76.  
77. })
78.  
79. },
80.  
81. })

解释：

（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错误：

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

1.  
2. // 'content-type': 'application/json'
3.  
4.  
5. 'Content-Type': 'json'

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

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

end

虽然忙活到12点，但是感觉受益匪浅。苦逼的程序猿，也只有获取知识时候的那点快感聊以自慰了。