網頁頁面NULL值對瀏覽器兼容性的影響
最近做項目中一個頁面中的input radio出現瀏覽器兼容性問題。
主要問題：
在谷歌瀏覽器，360急速模式和搜狗急速模式中給radio初始動態賦值時，checked屬性失效，無法選中。注：360急速模式和搜狗急速模式使用了谷歌chorme的內核（又稱webkit內核）。
在火狐瀏覽器中給radio初始動態賦值時，checked屬性正常選中。
本來同事以爲是瀏覽器兼容問題，始終未能解決問題，後來這個Bug交由我來修改。
初始接到任務時，也懷疑是瀏覽器兼容問題，但後來仔細一想，谷歌這麼牛皮的技術實力，出問題的機率應該比較小，遂從代碼本身查找問題。後來發現原來是有一個EL表達式的值附了NULL值，影響了radio的選中，纔出現了瀏覽器不兼容的Bug。
總結經驗教訓，對NULL值的判斷，十分必要，特別是頁面中JQuery不會對隱性錯誤進行提示。
先給出問題的代碼塊。主要功能是根據後臺傳參選擇radio是否選中。
<%-- <c:choose>
<c:when test="${gj.notmodelbad=='1' }">
<input type="radio" name="nobad" value="1" checked="checked" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描述不符，無法判斷</label><br />
<input type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常，非我司模塊問題</label>
</c:when>
<c:when test="${gj.notmodelbad=='2' }">
<input type="radio" name="nobad" value="1" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描述不符，無法判斷</label><br />
<input type="radio" name="nobad" value="2" checked="checked" style="margin-left:109.5px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常，非模塊問題</label>
</c:when>
<c:otherwise>
<input type="radio" name="nobad" value="1" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描述不符，無法判斷</label><br />
<input type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常，非我司模塊問題</label>
</c:otherwise>
</c:choose> --%>
我的解決方案：添加JQuery，根據後臺傳參動態賦值。
<div>
<c:choose>
<c:when test="${gj.badtype=='2'}">
<input type="checkbox" value="2" id="nomd" checked="checked"/>
</c:when>
<c:otherwise>
<input type="checkbox" id="nomd" value="2" />
</c:otherwise>
</c:choose>
<label><strong>非模塊不良</strong></label>
<table class="bdrighttab">
<tr>
<td style="width:100px;"><input id="nobadRad1" type="radio"
name="nobad" value="1" style="margin-left:112px;" /><label
style="margin-left:5px;font-size:14px;">信息描述不符，無法判斷</label><br />
<input id="nobadRad2" type="radio" name="nobad" value="2"
style="margin-left:112px;font-size:14px;" /><label
style="margin-left:5px;font-size:14px;">現場分析部件正常，非我司模塊問題</label>
<input type="text"
style="background-color:#e4e4e4;border-style:solid;border-color:#B0B0B0;border-width:thin;"
class="otherreason" value="${gj.otherreason}" /></td>
</tr>
<%-- <c:choose>
<c:when test="${gj.notmodelbad=='1' }">
<input type="radio" name="nobad" value="1" checked="checked" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描述不符，無法判斷</label><br />
<input type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常，非我司模塊問題</label>
</c:when>
<c:when test="${gj.notmodelbad=='2' }">
<input type="radio" name="nobad" value="1" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描述不符，無法判斷</label><br />
<input type="radio" name="nobad" value="2" checked="checked" style="margin-left:109.5px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常，非模塊問題</label>
</c:when>
<c:otherwise>
<input type="radio" name="nobad" value="1" style="margin-left:18px;"/><label style="margin-left:5px;font-size:14px;">信息描述不符，無法判斷</label><br />
<input type="radio" name="nobad" value="2" style="margin-left:112px;font-size:14px;"/><label style="margin-left:5px;font-size:14px;">現場分析部件正常，非我司模塊問題</label>
</c:otherwise>
</c:choose> --%>
</table>
</div>
</div>
JQuery動態賦值：
$(document).ready(function(){
var notmodelbad = ${gj.notmodelbad};
if(notmodelbad=='1'){
$("#nobadRad1").attr("checked",true);
$("#nobadRad2").attr("checked",false);
}
else if(notmodelbad=='2'){
$("#nobadRad1").attr("checked",false);
$("#nobadRad2").attr("checked",true);
}
});
後臺的.do型方法
// 市場並聯交互
@RequestMapping("maMutualGd.do")
public String MaMutualGd(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String type = request.getParameter("type");
int marketjiaohuid = Integer.valueOf(request.getParameter("id"));
String vCode = String.valueOf((request.getParameter("vcode")));
String date_from1 = String.valueOf((request.getParameter("datfrom")));
String date_to1 = String.valueOf((request.getParameter("datto")));
getCurrentInfo(type, vCode, date_from1, date_to1);
List<OdspappTGongdan> odspappTGongdanDtoList = qualityPerformanceService
.getOdspappTGongdanDtoList();
List<OdspappTGongdan> gdlist = new ArrayList<OdspappTGongdan>();
List<OdspappTGongdan> gdcloselist = new ArrayList<OdspappTGongdan>();
for (OdspappTGongdan g : odspappTGongdanDtoList) {
if (g.getJiaohustatus().equals("4")) {
gdcloselist.add(g);
} else {
gdlist.add(g);
}
}
OdspappTGongdan gd = new OdspappTGongdan();
if (type.substring(1, 2).equals("0")) {
gd = gdlist.get(marketjiaohuid);
request.setAttribute("gd", gd);
} else {
gd = gdcloselist.get(marketjiaohuid);
request.setAttribute("gd", gd);
}
GongdanBadJiaohu gj = qualityPerformanceService.getGdJiaohuInfo(
gd.getGdCode(), gd.getZyAccount());
if (gj.getChangestatus() == null || gj.getChangestatus() == "") {
gj.setChangestatus("0");
}
if (gj.getNotmodelbad() == null || gj.getNotmodelbad() == "") {
gj.setNotmodelbad("0");
}
System.out.println("Changestatus:" + gj.getChangestatus());
System.out.println("Notmodelbad:" + gj.getNotmodelbad());
request.setAttribute("gj", gj);
// request.getRequestDispatcher("UserEvaluation.jsp").forward(request,
// response);
return "pages/usersEvaluation/UserMutual";
}處理後的效果：
補充，此問題還有一種簡單的處理方式，就是用圖片代替radio，選中或不選中，換兩張圖就行。
問題代碼雖然不是本人所寫，但也提醒了我對Java空值處理的重要性，以後寫代碼時一定要加入NULL的判斷，有時我們遇到的大多數空指針異常，基本都是未初始化導致的NULL值異常。