今天是上班的第42天,對於一個程序媛來說,不管之前你學了多少年的知識,真正的時間,都應該是從上班開始算起的,因為上班才是敲代碼的開始,木有實踐,一切的理論對於程序媛來說都是扯淡~
好啦!今天學到了很多的東西,必須在這兒記錄一下!
當實現和后台的數據交互時,如果后台返回給我們的是一個數組,里面的值就像這樣子,然后前台就不能在JS中像常規那樣在構建里面中調后台的參數,看下面的詳解吧~
常規的時候后台返回的數據是這樣的:
然后我們在前台js構建頁面的時候是這樣子寫的:
但是如果后台今天不這樣給你反了呢!嘿嘿,他如果這樣子給你返成數組:
那你應該在前台怎么接受這些數據呢,不會了吧,嘻嘻,現學現賣,立馬分享給大家,其實很簡單:
就像這樣,就很成功的接收到了后台傳過來的數據,將數組的第一個元素數字賦給前台頁面的checkbox的value,同時input文本框的ID是type+這個數組的第一個元素,
也就是它的ID為type+checkbox的value值,這樣無形之中兩個元素就關聯了起來,到時候你在要將前台輸入的數據返回給后台就變成了一件很easy滴事情啦~
就在我正洋洋得意滴時候呢,后台告訴我,把前台接收到的數據也就是checkbox和input文本框給他拼湊成這樣的形式
然后我又開始糾結了,因為一時木有想到,原來創建對象是可以解決的,所以在這里再和大家分享一下創建對象的東東。。。
我的代碼是這樣子滴
為了方便大家測試,還是提供一份可以復制滴版本吧!
var checkedObj = $('input:checkbox[name="resou_check"]:checked');
var data = {};
for(var i= 0; i < checkedObj.length; i++) {
var check = checkedObj[i].value;
var text = $('#type'+ checkedObj[i].value).val();
data[check] = text;
}
這樣寫想要達到的目的是返回給后台的數據就會是這樣子的,正好是后台所需要的。
為了更加方便大家理解,我將上面的代碼加上了清晰的注釋:
這樣子看起來就清楚多了!!!
接下來要做的事情就是要將獲取到的對象返回給后台,叫一個json的參數里面。后台這次要的這些數據是一個json.
最初我是這樣子做的:::
看來看去覺得哪兒有問題,就是不知道哪兒有問題,想了想豁然開朗!
后台要我返回給他的,是一個json,而我偏偏給他返回了一個對象,這是多么痛的領悟啊~
立馬解決,分分鍾不拖!!
只需要在傳給后台數據之前加上一個小小的句子就好!
這樣就將data對象轉換成json了~哈哈!!!
-----------------------------------------------------------------------------------這是華麗的分割線---------------------------------------------------------------------------------------------------------------
今天用到了用ajax提交表單數據給后台,就是當點擊submit按鈕的時候,執行我的submit方法,將頁面中的表單數據傳給后台放在數據庫中去。
這個操作沒有什么特別的,就是后台會給一個接口,然后和其他的方法一樣,創建ajax請求,數據返給后台變好。
客服那邊有個要求就是當點擊了提交之后,頁面中表單里面所填過的內容被清空了,本來一開始我的第一想法是reset().但是寫進去貌似達不到想要的效果,然后我靈機一動,以為想出了一個好法子!
發現它並不能達到預期的效果,表單中的東西壓根就不甩我!
反復思考之后發現,發現原本這個語句是獲得了頁面DOM樹中的一個節點,
然后我活生生的非要把這個節點賦給一個變量,然后還傻不拉唧的把這個變量的值給清空了,明明清空節點的值就達到效果的事兒么~!!!
於是乎,我再次醒了過來,揮筆如有神滴敲下了如下的代碼,瞬間頁面表單葯到病除!!!完全康復啦!!!哈哈~
通過checkbox和input文本框的類名找到它們,然后將里面的內容清空!!!!
-------------------------------------------------------------------------------------------------我是華麗的分割線---------------------------------------------------------------------------------------------------------------
下面說下我身邊做的一個很牛很牛滴后台大神幫我解決的一個問題
上面已經說了,后台是傳給我一個數組的,然后我需要把它顯示在我的頁面里,可是我如果直接用構建頁面直接這樣用<tr><td></td></tr>包裹着checkbox和input文本框加載進來的話,
就會是一組checkbox和input文本框放在一行表格中,看起來很難看,我想要讓三個這樣一組的放在一行,
就是需要加循環在構建頁面的時候一個<tr></tr>里面有3個<td></td>,然后每個<td></td>里面一組checkbox和input文本框。
每個<td></td>里面一組checkbox和input文本框這個是很好實現的,正當我在那兒糾結的時候,大神出馬了。
請看下面代碼:
別的不多說,這個思維邏輯,着實讓我這樣兒的菜鳥膜拜~
前端的頁面優雅滴立馬變成了這個樣子!!!
嘻嘻!真是充實滴一天啊~!!