2017年10月31日,今天是萬聖節,歡樂谷搞事情。
剛接觸前端那會是分不清,前端和后台的,后台的數據如何傳輸到前端的。
現在用的還是Jquery的ajax請求后台數據到前端頁面的,需要學習的地方還有很多,任重而道遠也。
前后端分離,你是如何定義的呢?我現在公司現在用的php后台語言,現在逐步轉型到Java,在此記錄一點點變化,用作后面追憶
歲月的時候,可以作為回憶的印記。
技術:
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <p>如果你瀏覽器的URL是:http://127.0.0.1:8020/web-demo/demodemo/data02.html?id=88&topId=66&artId=6868&findId=999</p> 11 </body> 12 <script type="text/javascript"> 13 //1.通過下面封裝對方法,查詢對應對參數 14 var id = getQueryString("id"); 15 var topId = getQueryString("topId"); 16 var artId = getQueryString("artId"); 17 var findId = getQueryString("findId"); 18 //2.封裝的一個函數對URL后面的參數進行查詢,可以直接復制在項目中使用 19 function getQueryString(name) { 20 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 21 var r = window.location.search.substr(1).match(reg); 22 if(r != null) return unescape(r[2]); 23 return ''; 24 }; 25 //3.在控制台打印對應對參數 26 console.log(id); //88 27 console.log(topId); //66 28 console.log(artId); //6868 29 console.log(findId); //99 30 </script> 31 32 </html>
我們從一個頁面到另外一個頁面的時候,有時候需要帶一個參數過去,加以區分,這個時候就需要用到URL后面把參數帶過去。
http://127.0.0.1:8020/web-demo/demodemo/data02.html?id=88&topId=66&artId=6868&findId=999
例如上面這個鏈接,我們只需要在鏈接最后通過?xxx=&xxx=&xxx=這樣的方式把參數通過URL傳遞到另外一個頁面,注意?xxx=只能只能出現一次,后面的參數我們通過&xxx=傳遞;
其中xxx為你傳遞的參數。
參數帶過去,我們可以通過下面的函數把它提取出來:
1 function getQueryString(name) { 2 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 3 var r = window.location.search.substr(1).match(reg); 4 if(r != null) return unescape(r[2]); 5 return ''; 6 };
上面這個方法只能提前數字和字母,不能提起中文。在后續傳遞中文的過程中,無法把參數給提取出來。經過研究,可以使用另外一種方法,既可以提取中文也可以提取英文。
1 getQueryStringZH: function() { 2 var url = window.location.search; //獲取url中"?"符后的字串 3 var theRequest = new Object(); 4 if(url.indexOf("?") != -1) { 5 var str = url.substr(1); 6 strs = str.split("&"); 7 for(var i = 0; i < strs.length; i++) { 8 //就是這句的問題 9 theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]); 10 //之前用了unescape() 11 //才會出現亂碼 12 } 13 } 14 return theRequest; 15 },
注意你提起出來的是一個對象,需要通過提起對象的參數而獲得參數。
var getRequest = common.getQueryStringZH();
var companyName = getRequest.companyName;
然后你就可以在文檔中,隨意使用了。
