ps: 最近項目改bug,遇到前端的問題,花了不少時間才找出毛病,在這裏做個記錄。避免同樣的問題。隨便分享一下,防止踩坑。。。
場景:頁面展示一列列數據;選中某列,點擊編輯,跳轉到編輯頁面;將該列的某個屬性值展示在編輯頁面的select框中。(select默認值)
一、 運用到的知識點
-
ajax
項目中經常運用到ajax來請求數據,接受後臺數據,用於在前臺展示。
ajax 是異步請求,局部加載數據;與url 請求不同,不會刷新頁面。但是對請求我們可以 通過屬性async來控制同步和異步。
同步與異步的主要區別:
同步可以改變外部定義的變量值,
異步可以提高加載效率 -
異步和同步
異步:ajax不會影響整個頁面的加載,相當於和瀏覽器加載或者用戶操作分開走,互不相干,體現在用戶角度就是不會有什麼卡頓的感覺彷彿無事發生。
同步:那就與異步相反,他和加載處於同一條線上,等這位大爺過了馬路,後面的人才能接着走,就是在加載它的時候,全部的過程都等停下來,也就是假死狀態。 -
select下拉框設置默認值
$("#fwtxxmbUpdateTemp select[name='type']").attr("value",type);
二、項目實例
- ajax請求數據,在編輯頁面一打開,會有動態的下拉框
var typename="";
var typecode="";
function qeuryTempletnameList(){
$.ajax({
url: XXXX, //請求地址
type: "POST",
async:false, // 設置成同步,typename,typecode外部變量才能接受值
dataType: "json",
success : function(data){
var datas = data.data;
var optionstring ="";
for (var i =0 ; i < datas.length ; i++) {
optionstring += "<option value=\"" + datas[i].TYPECODE + "\" >" + datas[i].TYPENAME + "</option>";
typename = datas[i].TYPENAME;
typecode = datas[i].TYPECODE;
}
$("#type").html("<option value=\"\">--請選擇--</option>" + optionstring);
}
});
}
2. 點擊展示是默認值
$.open({
title:title,
width:"700px",
height:"80%",
content:$("#xxx").html(),
btns:btns,
success : function(){
qeuryTempletnameList();
var type = data.data.type; //data.data是另個請求的返回的數據,在這裏我沒有寫
//通過設置value屬性值,獲取select值
$("#Temp select[name='type']").attr("value",type);
}
})
效果: //從列表頁面 帶到 編輯頁面 的 默認選中數據