web基礎知識（三）關於ajax，Jquery傳值最基礎東西

今天補充一下兩個小功能，一個是關於radio單選框的狀況，如何在前面選了後，傳到後臺，編輯修改的時候再次傳回來，而且在當時選的那個上；再一個就是關於添加小標籤的時候添加接着彈出在下面，並點擊出現刪除。

一：radio

1 <div class="newlylist">
2             <div class="newlyhead">圖示商品：</div>
3             <div class="newlycontent"><input type="radio" name="product_type_0"  value="上衣" />&nbsp;&nbsp;上衣  <input name="product_type_0" type="radio"  value="褲裝" />&nbsp;&nbsp;褲裝<input name="product_type_0" type="radio"  value="裙裝" />&nbsp;&nbsp;裙裝 </div>
4         </div>

 

 1     $(".editDvd").live("click",function(event){        //編輯獲取本行數據並跳轉
 2         $("#editstuffDvd").css("display","block");
 3         $("#fadeshow").css("display","block");
 4         $(this).parent().parent().addClass("editnow");
 5         var editId=$("#editstuffDvd").children();
 6         var textGet = $(this).parent().parent().children();        //this textGet is the edit line data,
 7         
 8         editId.eq(1).children().eq(3).val(textGet.eq(1).children().attr("src"));    //path 1--1
 9         /*editId.eq(2).children().eq(1).children().val(textGet.eq(2).text());*/            //show    ,get a
10         if(textGet.eq(2).text()=="上衣"){
11             editId.eq(2).children().eq(1).children().eq(1).removeAttr("checked");
12             editId.eq(2).children().eq(1).children().eq(2).removeAttr("checked");
13             editId.eq(2).children().eq(1).children().eq(0).attr("checked","checked");
14         }else if(textGet.eq(2).text()=="褲裝"){
15             editId.eq(2).children().eq(1).children().eq(0).removeAttr("checked");
16             editId.eq(2).children().eq(1).children().eq(2).removeAttr("checked");
17             editId.eq(2).children().eq(1).children().eq(1).attr("checked","checked");
18         }else{
19             editId.eq(2).children().eq(1).children().eq(0).removeAttr("checked");
20             editId.eq(2).children().eq(1).children().eq(1).removeAttr("checked");
21             editId.eq(2).children().eq(1).children().eq(2).attr("checked","checked");
22         }
23         editId.eq(3).children().eq(1).children().val(textGet.eq(3).text());            //dvd
24         editId.eq(4).children().eq(1).children().val(textGet.eq(4).text());            //url
25         editId.eq(5).children().eq(1).children().val(textGet.eq(5).text());            //order
26         editId.eq(6).val(textGet.eq(0).text());                                        //id
27         
28     });

html代碼如圖所示，這個是編輯彈出來的HTML，注意不能給某個加上checked="checked"，加上的話就會出問題咯，

下面js代碼中跟昨天的相似，editId是爲了獲得編輯彈出的html的代碼，能夠用chrome瀏覽器調試查看，以下圖

經過chrome調試工具能夠看到，editId指的是彈出來的編輯框，裏面的元素點擊的時候能夠對應圖上的東西，textGet是底下編輯框這一行的東西，第二張圖片能夠看得出來。

在上面js代碼的每一個if都有11-12行這樣的removeAttr("checked")，是爲了不連續編輯兩次，出現後面的全部編輯中radio的值都是第一次的值狀況，因此要加上這兩句。

 

二：如圖

功能如上所說，添加在下面出現，點擊小X進行刪除。下面是添加的js代碼

 1 function addAlbums () {
 2     
 3     $.ajax({
 4         type: "post",
 5         url : 'addAlbums.html',
 6         data: {albumName:$("#albumName").val()},
 7         dataType: "json",                    
 8         success : function(data)
 9         {
10             /*console.log(data);*/
11             var json = eval("("+data+")");
12             var  addLableText = '';
13             for(var i=0;i<json.length;i++){
14                 addLableText += '<div class="lablelist"><span>'+json[i].albumName+'<img class="del_img delAlbum" width="18" height="16" src="backimg/della.png" value="'+json[i].albumId+'"></span></div>';
15             }
16             var addLable = $(".special").children().eq(1).children().eq(0).children().eq(3);
17             addLable.append(addLableText);
18             
19         }
20     });
21 }

成功插入到數據庫後，把數據庫內容返回回來就是data中的數據，再循環列表顯示(組裝成爲HTML代碼添加到前臺)。

點擊列表顯示的內容，刪除的時候js代碼以下。

注意：此處爲了方便，直接在上面代碼14行中把ID直接賦給了value，這是一種取巧方便的辦法，，因此在下面4行彙總得到要刪除的ID的時候是$(this).attr("value");

 1     $(".delAlbum").live("click",function(event){
 2         
 3         var delImg=$(this);
 4         var delId = $(this).attr("value");
 5         alert(delId);
 6         $.ajax({
 7             type: "post",
 8             url : 'deleteAlbumById.html',
 9             data: {albumId:delId},
10             dataType: "json",                    
11             success : function(data, status, xhr)
12             {
13                 delImg.parent().parent().remove();
14             }
15         });
16     });

歡迎拍磚~~~~~~