Wex5 通过ajax访问远程数据

我研究wex5也就几天,所以很多地方可能理解的也是模棱两可,如果有大牛看到我的不足,敬请指正。

我们公司pc端网站基本完成,但移动端还没有开始,老大说让学习wex5,用wex5开发移动端。

所以wex5与pc端肯定是用一个数据库,因此我必须要解决的是如何用wex5连接到远程服务器获取数据,然后显示到移动端

一、 通过Ajax请求获取远程数据

[javascript] view plain copy
  1. $.ajax({  
  2.             "type" : "get",  
  3.             "dataType" : "json",  
  4.             "async" : false,  
  5.             "url" : "http://www.xxx.com/portal/dr",  
  6.             "data" : {  
  7.                 "action" : "getPortalDoctor",  
  8.             },  
  9.             "success" : function(xhr) {  
  10.                 for (var i = 0; i < xhr.length; i++) {  
  11.                      data.add({  
  12.                            name : xhr[i].name,  
  13.                            id : xhr[i].id,  
  14.                        });  
  15.                 }  
  16.             }  
  17.         });  

dataType类型为json字符串

url是远程服务器定位到获取数据方法的url

action 指具体方法

下面是web后台获取数据方法

  1. @Controller  
  2. @RequestMapping("<strong>/portal</strong>")  
  3. public class PortalController {  
  1. @RequestMapping(value = "<strong>/dr</strong>", method = RequestMethod.GET)  
  2.     @ResponseBody  
  3.     public Object <strong>getPortalDoctor</strong>() {  
  4.         return portalService.getPortalDoctor();  
  5.     }  
  1. }  

将ajax请求写在了model的onLoad方法内了

二、UI设计

很简单,我新建了一个标准页面,在model上放了data组件userData,并设置了两列id和name;然后在content上放了list组件并绑定上userData(在list上放了两个output,分别用bind-ref绑定到userData的id和name)

然后在modelLoad方法里 1 获取data对象

                                              4 给data对象绑定数据

Wex5 通过ajax访问远程数据


最后运行就可以看到数据了