專案總結-js簡單易忽略的問題
1 JQuery操作radio
1)獲取按鈕選中的值:$("input:radio:checked").val();
2)選中或者取消選中某個Radio的方法,可以通過新增屬性或者刪除屬性checked來完成
$("#radioId").attr("checked",true);$("#radioId").removeAttr("checked");
2 ajax請求時dataType的作用
dataType設定為某種型別(如json),但請求返回的資料格式非該型別時,ajax會走入異常返回的函式error function(e){}中,該分支應該儘量記錄異常資訊便於錯誤排查。async:false,非同步標識為false可以使JS順次執行,預設為true。如果對JS執行順序要求同步,則可設定改標識為false,如果失效則應該檢查該屬性的名稱是否正確。
3 頁面直接跳轉到某個頁面的方法
window.location.href="";
4 Resource interpreted as Document but transferred with MIME type application/json: "http://localhost:8080/addResource".
使用form提交時返回的是Documment的。
5 對於具有display:none樣式的表單
在提交時是以hidden的形式提交了,我有一個表單是select ,但是處於某個display:none的Div中,結果提交後JS報錯:
Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.
display:none的表單的表單是以hidden形式提交的,我的select雖然是不顯示的,但是添加了option選項,導致此問題。直接刪掉該不需要顯示的select表單就好了。此外,disable的表單,是不會被提交的。如果不想讓某個表單可操作同時又需要提交,應該使用readonly屬性,而不是disable屬性。
6 js的動態拼接語句
1)在JS中拼接html元素時,對字串需要用引號引住,如果是在引號內需要新增字串,應交替使用另外一種引號引住。例如:在如下JS中動態拼接顯示列表時,第一個單元格td的內容是一個radio,需要動態設定一個onclick="checkRadio(this,localUrl)" 屬性,而屬性值指向的是函式的第二個引數是一個字串,需要使用引號表示字串,而外層屬性使用了雙引號,則屬性內的字串則應該交替使用單引號,即:onclick="checkRadio(this,'localUrl')",如果localUrl使用轉義雙引號,則JS會丟擲則異常,異常原因是外層的雙引號和內層雙引號衝突。這種場景下必須使用單、雙引號交替。
function setImageTable(){
var tBody = $("#imageTableId");
tBody.find("tr").remove();
if (resources != null) {
for ( var i = 0; i < resources.length; i++) {
var item = resources[i];
var tr = $("<tr/>");
tr.append("<td><input type=\"radio\" name=\"mediaId\" value=\""+item.id+"\" onclick=\"checkRadio (this,'"+item.localUrl+"')\"/></td>");
tr.append("<td><img src='"+item.localUrl+"' width='100' height='100'/></td>");
tr.append("<td>" + formatText(item.name)+ "</td>");
tr.append("<td>" + formatText(item.description)+ "</td>");
tBody.append(tr);
}
}
}
2)undefined和字串'undefined'不是同一個東西
我用JS拼接了一個Radio表單的值,希望通過判斷該值是否為空來判斷Radio是否被選中。而在上面的函式setImageTable的第一行由於item並沒有屬性id,導致radio的value是'undefine'而不是undefined關鍵字而判斷錯誤。正常改正後,如果沒有選中radio則,checked值是未定義關鍵字的。
function save(){
//獲取選擇按鈕的值
var checked = "";
checked = $('input:radio:checked').val();
if(checked==undefined&&msgType != 'text'){
alert("請選擇要傳送的訊息素材!");
return;
}
}
結論:
程式設計是細緻活,工具則是越用越靈活,各種小問題解決後也整理了一籮筐,積累積累! 工作以來一直都是做後臺開發,沒有專門學習過javascript,只是憑藉對java的瞭解,以及語言想通的特點參與頁面的開發。也能應對專案中頁面的開發工作,雖然碰到各種簡單的問題,總結起來也豐富了自己JS方面的知識。