1. 程式人生 > >使用APICloud編寫優雅的HTML5程式碼《二》:ajax、檔案上傳

使用APICloud編寫優雅的HTML5程式碼《二》:ajax、檔案上傳

摘要: 對於ajax這個API而言,它實際上是有非常多的引數可供開發者選擇的,以此滿足各種特殊的需求,包括:url、method、cache、timeout、dataType、charset、headers、report、returnAll、data等等,使用者可以根據實際情況,結合使用這些引數,來完成非常多的需求,如通常的訪問WebService介面獲取資料(GET)、提交表單(POST)、上傳檔案、下載檔案等。一個簡單的API卻包含了非常強大的功能。

下面簡單介紹各種型別請求的程式碼:

1、GET請求程式碼示例:

api.ajax({
  url:'http://m.weather.com.cn/data/101010100.html'
//天氣預報網站的WebService介面 },function(ret,err){ if (ret) { api.alert({msg:JSON.stringify(ret)}); } else { api.alert({msg:JSON.stringify(err)}); }; });

2、POST請求示例:
POST請求-Form表單提交:

api.ajax({
  url: 'http://www.xxx.com/path/form',
  method: 'post',
  dataType: 'text',     //該引數若不傳,則預設為json
  data: {
    values:{name: 'devlp'
, password: '123456'} //鍵值對 } },function(ret,err){ if (ret) { api.alert({msg:JSON.stringify(ret)}); } else { api.alert({msg:JSON.stringify(err)}); }; });

POST請求-單個/多個檔案,檔案組上傳:

api.ajax({
  url: 'http://www.xxx.com/path/upLoad',
  method: 'post',
  data: {
    files:{myfile: 'filepath'
} // filepath來自ios或者Android的檔案系統中的任意檔案。可設定多個檔案,甚至是檔案陣列,如files:{myfile: 'filepath', myfile1: 'filepath1'}或者files:{'myfile[]': ['filepath', 'filepath1']}等 } },function(ret,err){ if (ret) { api.alert({msg:JSON.stringify(ret)}); } else { api.alert({msg:JSON.stringify(err)}); }; });

POST請求-提交二進位制流:

api.ajax({
  url: 'http://www.xxx.com/path/body',
  method: 'post',
  data: {
    body:'textbits'
  }
},function(ret,err){
  if (ret) {
    api.alert({msg:JSON.stringify(ret)});
  } else {
    api.alert({msg:JSON.stringify(err)});
  };
});

POST請求-提交檔案流:

api.ajax({
  url: 'http://www.xxx.com/path/body',
  method: 'post',
  data: {
    stream:'filepath'
// filepath來自ios或者Android的檔案系統中的任意檔案
  }
},function(ret,err){
  if (ret) {
    api.alert({msg:JSON.stringify(ret)});
  } else {
    api.alert({msg:JSON.stringify(err)});
  };
});

POST請求-Multipart-Data,檔案和文字欄位一起提交:

api.ajax({
  url: 'http://www.xxx.com/path/multipart',
  method: 'post',
  data: {
    values:{name: 'devlp', password: '123456'},
    files:{file: 'fs://test.png'}
  }
},function(ret,err){
  if (ret) {
    api.alert({msg:JSON.stringify(ret)});
  } else {
    api.alert({msg:JSON.stringify(err)});
  };
});

POST請求-顯示上傳進度:

api.ajax({
  url: 'http://www.xxx.com/path/multipart',
  method: 'post',
  report: true,
  data: {
    values:{name: 'devlp', password: '123456'},
    files:{file: 'fs://test.png'}
  }
},function(ret,err){
       if(ret){
              if(0 == ret.status){
                     //loading('進度:' + ret.progress);
              }else{
                     api.alert({msg:'上傳成功:\n' + JSON.stringify(ret)});
              }
       }else{
              api.alert({msg:JSON.stringify(err)});
       }
});

除此以外,put、delete、head等方式請求使用方式大同小異,在此不做詳細敘述。