前后端分離關鍵技術

前后端分離需要考慮以下幾個問題：

• 表單提交之后，前端的URL就被后台控制了 一切提交表單都不能直接submit，要把表單數據通過ajax提交，而不能form.submit ajax提交表單的方式把url的控制權保留在了前端手中
• 前后端分離之后，如何讓多個html頁面共用header，footer等公共部分 通過組件（component）的方式，組件之間構成了一個樹形結構。
• 前后端分離之后，URL如何跳轉 前后端分離之后，整個前端就變成了SPA（單頁面應用），就像一個手機APP一樣，只有一個index.html，一切路由都是由前端js通過history控制的。

傳統的網站開發方式是MVC，一切html界面都必須是由后端來控制顯示的，一切html頁面皆是模板。不能直接訪問模板，而必須通過后端Servlet來訪問模板。掌握這條准則，就能在后端游刃有余。

在前后端分離中，前端就像一個Android手機。Android手機發出的HTTP完全是AJAX方式的。 傳統的表單提交通過action來控制表單提交的目標URL，提交之后，URL跳轉的權限就完全交給后端了。

function doUpload() {  
     var formData = new FormData($( "#uploadForm" )[0]);  // 要求使用的html對象
     $.ajax({  
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: true,  
          // 下面三個參數要指定，如果不指定，會報一個JQuery的錯誤 
　　　　　cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
}

FormData還可以使用純的js方式編寫。

構造函數 new FormData (optional HTMLFormElement form) 參數 form (可選) 一個HTML表單元素,可以包含任何形式的表單控件,包括文件輸入框. 方法 append() 給當前FormData對象添加一個鍵/值對.

void append(DOMString name, Blob value, optional DOMString filename); void append(DOMString name, DOMString value); 參數值 name 字段名稱. value 字段值.可以是,或者一個字符串,如果全都不是,則該值會被自動轉換成字符串. filename(可選) 　　 指定文件的文件名,當value參數被指定為一個Blob對象或者一個File對象時,該文件名會被發送到服務器上,對於Blob對象來說,這個值默認為"blob".