2015年12月25日 星期五

[Vue.js] 在 ajax 上傳後取得 data 的 Object

最近在學 Vue.js,遇到一些問題解決了做點小筆記。



寫了一個 ajax 上傳的功能,上傳 csv 後會自動產生圖表,並可以藉由左邊的列表增加刪減項目,上傳 csv 的程式碼如下。

  1. new Vue({   
  2.   el: '#app',   
  3.   data: {   
  4.     list: [   
  5.     ]   
  6.   },   
  7.     methods: {   
  8.         uploadCsv: function(){   
  9.         csv =  $("#csv_file")[0].files;   
  10.         var data = new FormData();      
  11.         data.append("csv_file", csv[0]);      
  12.         var self = this;   
  13.         $.ajax({      
  14.                 url: 'upload-csv.php',      
  15.                 type: 'POST',      
  16.                 data: data,      
  17.                 cache: false,        
  18.                 processData: false// Don't process the files      
  19.                 contentType: false// Set content type to false as jQuery will tell the server its a query string request      
  20.             success: function(data, textStatus, jqXHR)      
  21.             {      
  22.                 $csvData=data; //return string   
  23.   
  24.                 d3.csv($csvData, function(data) {   
  25.                     self.list=data;   
  26.                     arrayLength=self.list.length;   
  27.                         for($i=0;$i<arrayLength;$i++){   
  28.                             self.list[$i]["color"]=color($i);   
  29.                         }   
  30.                     svg.remove();   
  31.                     svg = d3.select("#chart").append("svg").attr("width",400).attr("height",300);   
  32.   
  33.                     svg.append("g").attr("id""salesDonut");   
  34.   
  35.                     Donut3D.draw("salesDonut", self.list, 150, 150, 130, 100, 30, 0.4);   
  36.   
  37.                     var info = svg.selectAll("g.info")   
  38.                               .data(self.list)   
  39.                               .enter()   
  40.                               .append("g")   
  41.                               .attr("class""info")   
  42.                               .attr("transform""translate(" + 300 + "," + 50 + ")");   
  43.   
  44.                           info.append("text")   
  45.                           .attr("x", 10)   
  46.                           .attr("y"function(d, i){   
  47.                             return i*24;   
  48.                           })   
  49.                           .attr("fill"function(d, i) {   
  50.                             return color(i);   
  51.                           })   
  52.                           .text(function(d, i) {   
  53.                             return d.label+": "+d.value;   
  54.                           });   
  55.   
  56.                 });   
  57.                    
  58.                 if(typeof data.error === 'undefined')      
  59.                 {      
  60.                     // Success so call function to process the form      
  61.                 }      
  62.                 else     
  63.                 {      
  64.                     // Handle errors here      
  65.                     console.log('ERRORS: ' + data.error);      
  66.                 }      
  67.             },      
  68.             error: function(jqXHR, textStatus, errorThrown)      
  69.             {      
  70.                 // Handle errors here      
  71.                 console.log('ERRORS: ' + textStatus);      
  72.                 // STOP LOADING SPINNER      
  73.             }      
  74.         });     
  75.         }   
  76.   }  

html 則為這樣

  1. <div class="row" id="app">  
  2.             <div class="col-md-6">  
  3.                 <form class="form-inline">  
  4.                     <div class="form-group">  
  5.                         <label for="">上傳 csv: </label><input name="csv_file" type="file" id="csv_file">    
  6.                     </div>  
  7.                     <a role="button" class="btn btn-primary" id="upload_csv" v-on:click="uploadCsv">確認上傳</a>  
  8.                 </form>  
  9.                 <form class="form-inline">  
  10.                 <div class="form-group">  
  11.                          <input type="text" class="form-control" id="d_item" placeholder="項目" v-model="label">  
  12.                         <div class="input-group">  
  13.                              
  14.                           <input type="text" class="form-control" id="d_val" placeholder="值" v-model="value" number>  
  15.                           <span class="input-group-btn">  
  16.                             <button class="btn btn-primary" id="add_data" type="button" v-on:click="addItem">新增</button>  
  17.                           </span>  
  18.                         </div><!-- /input-group -->  
  19.                     </div>  
  20.                 </form>  
  21.                 <ul class="list-group" id="item_list" >  
  22.                     <li v-for="item in list" data-item='{{ item.label }}' data-val='{{ item.value }}' class='list-group-item'>{{ item.label }}: {{ item.value }}<span v-on:click="removeItem($index)" class='badge'>x</span></li>  
  23.                 </ul>  
  24.                 <a role="button" class="btn btn-primary" id="btn_generate" v-on:click="generateChart()">Generate</a> <a role="button" class="btn btn-primary">Save</a>  
  25.             </div><!-- col-md-6 -->  
  26.             <div class="col-md-6">  
  27.                 <div id="chart"></div>  
  28.             </div>  
  29. </div><!-- row -->  
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...