apicloud应用笔记（一）

---

1.1数据请求

apicloud官方提供已封装好的ajax方法请求后台，具体使用方法如下：

api.ajax()

api.ajax({

      url: 'http://192.168.1.101:3101/upLoad',
      method: 'post',
      data: {
          values: { 
              name: 'haha'
          },
          files: { 
              file: 'fs://a.gif'
          }
      }       },function(ret, err){
      if (ret) {
           alert(JSON.stringify(ret));
      } else {
           alert(JSON.stringify(err));
      }       });

• url:请求路径(action路径或controller路径)；

• method:post(api.ajax方法中必须用post方法来提交，约定。)；

• data:参数值，键值对方式来传值，后台get方法即可获取；

• ret:通过以上参数请求后获得的数据，json对象。

注：

• parse()用于从一个字符串中解析出json对象;
• stringify()用于从一个对象解析出字符串;
• 特别注意，api.ajax在提交数据是用post方法提交，并且，提交参数格式与jquery参数格式不同，如下

data:{
values:{
name : ‘david’
}
}

---

1.2 页面填充（推荐使用doT.js）

• doT.js在页面动态填充内容时，首先通过ajax方法从后台调取数据data，再将获取的数据填充到html中，如下:

  var interText = doT.template($(contentTmpl).text());
  
  $(content).html(interText(data));
  

  其中，contentTmpl是页面中定义模板的id，content是内容区块的id，data是ajax返回的json数据。

  <script id="contentTmpl" type="text/x-dot-template">
      <div class='swipe-wrap'>
          {{~ it.advList:value:index}}
              <div class="swiper-slide">
                  <img alt="" src="{{= it.advList[index].atturl}}">
              </div>
          {{~}}
      </div>
  </script>
  <div id="content"></div>
  

  • contentTmpl:由中定义的动态模板。
  • content：用于显示模板填充内容的层。

• 在查询后台数据时，往往会返回一个JSONObject的json对象，的那个页面需要显示参数时，则需要doT.js的一些遍历用法来正确的取值。

  <1> 若json数据结构为

      {   
          "totalCount": 16,
          "member": {
                     "member_id": 31,
                     "uname": "atest",
                     "email": "asd@123.com",  
          }
      }
  

  • 若要取uname属性，只需使用{{=it.member.uname}}来获取;
  • it指代数据源。

  <2> 若json数据结构为

   {   
      "ordersList": {
          "data": [
              {
                  "order_id": 57,
                  "sn": "145377841322",
                  "member_id": 31,
                  "status": 0,
              }
          ]
      }
   }
  

  此时需要用for循环遍历数组内元素，

      {{ for(var i=0; i < it.ordersList.data.length; i++) { }}
          {{var order = it.ordersList.data[i];}}
      {{ } }}
  

  • 取得data中的属性: {{= order.order_id }}
  • 若data集合中还有其他数组，可将同样的for循环嵌套使用。

  <3>当页面需要根据传递的参数来控制显示内容时，会用到if判断语句，在doT.js中，判断语句用{{?}}来表示；

  {{? order.pay_status == 0}}
  
      <a href="javascript:;" >取消</a>  
  
  {{?}}
  

  其中:

  • {{? }} if条件语句
  • {{?? }} else if 条件语句
  • {{？}} else语句

  <4>当页面取出的json数据为一个数组是，可用

  {{~data.array :value:index }}
  ...
  {{~}}
  

  遍历内容，例如，

      {{~ it.advList:value:index}}
          <div class="swiper-slide">
              <img alt="" src="{{= it.advList[index].atturl}}" >
          </div>
      {{~}}
  

---