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

此次仍是一些關於jQuery，ajax先後臺傳值狀況， 是本身在作點小東西過程當中遇到的，記錄下來爲本身也方便別人

列表不少，點擊編輯和刪除無刷新的進行操做的話，確定是ajax了，由於無刷新嘛，可能有的朋友會說直接傳值，傳ID到Action刪除不就OK了，用得着寫js麼，純粹本身找麻煩嘛。

其實這裏重點是無刷新的啦， 這個上傳後到這裏來，有個預覽功能，把本次的所有預覽，若是所有刷新的話，那麼剛纔上傳的就不會在這個頁面了，so，仍是採用無刷新的比較好。

　　點擊編輯跳到一個新的頁面的時候有兩種方法能夠選擇，一: 獲取此時頁面的值傳到彈出頁面,二：獲得這個ID從數據庫裏面取值，傳到彈出頁面；後來一想，由於這些數據已經在數據庫裏面了，

再去取一遍仍是同樣的數據，還加大了時間開銷，直接從頁面取可能更方便點。

看代碼，

 1    <div class="editstuff" id="editstuffSlide">
 2         <div class="stuff_title"><div class="newlytitle">編輯內容</div><a class="closestuff"><img  width="35" height="35" src="backimg/stuffclose.png" ></a></div>
 3         <div class="newlylist">
 4             <div class="newlyhead"><span class="redletter">*</span>圖片：</div>
 5             <div class="newlycontent"><input type="button" class="upload_pic" value="上傳圖片"></div>
 6             <input type="file" onchange="updateImageslide(this)" id="imgUpFileSlide" name="tbdvdFile" />
 7                  <input type="hidden" id="imgUpPathslide"  name="imgUpPathslide" />
 8             <div id="slidePhoOKedit"></div>
 9         </div>
10         <div class="newlylist">
11             <div class="newlyhead"><span class="redletter">*</span>連接：</div>
12             <div class="newlycontent"><input type="text" class="upload_url"></div>
13         </div>
14         <div class="newlylist">
15             <div class="newlyhead">標題：</div>
16             <div class="newlycontent"><input type="text" class="upload_title"></div>
17         </div>
18         <div class="newlylist">
19             <div class="newlyhead">排序：</div>
20             <div class="newlycontent"><input type="text" class="upload_oder"><div class="tip">填寫的數字越大，圖片排得越靠前。不填數字，默認按上傳時間排序。</div></div>
21         </div>
22         <input type="hidden" id="hiddenSlideId"  name="hiddenSlideId" />
23         <input type="button" class="save_info editSaveSlide" value="保    存">
24     </div>    

 

 1     $(".editSlide").live("click",function(event){        // 編輯獲取本行數據並跳轉
 2         $("#editstuffSlide").css("display","block");
 3         $("#fadeshow").css("display","block");
 4         $(this).parent().parent().addClass("editnow");
 5         var editId=$("#editstuffSlide").children();
 6         var textGet = $(this).parent().parent().children();
 7         
 8         editId.eq(1).children().eq(3).val(textGet.eq(1).children().attr("src"));
 9         editId.eq(2).children().eq(1).children().val(textGet.eq(3).text());
10         editId.eq(3).children().eq(1).children().val(textGet.eq(2).text());
11         editId.eq(4).children().eq(1).children().val(textGet.eq(4).text());
12         editId.eq(5).val(textGet.eq(0).text());
13         
14     });

editId獲得的是把html代碼中div下的全部子div都包括在內了，這個div也就是上面代碼中的就是要展現所要編輯的數據，下面8-12行代碼就是爲了賦值用的，

textGet獲得的就是上面圖片展現的這一行的div所包括的內容 textGet.eq(1).children().attr("src")是獲得了圖片的路徑，src嘛，這樣彈出來的頁面內的值就是所要編輯的值了，

下面代碼是點擊彈出來div的保存按鈕時候產生的js操做

 1     $(".editSaveSlide").click(function () {
 2         $(this).parent().css("display","none");
 3         $("#fadeshow").css("display","none");
 4         
 5         var editId=$(".editstuff").children();
 6         var textGet = $(".editnow");
 7         
 8         $.ajax({        //預覽前的編輯後保存按鈕操做 slide
 9             type: "post",
10             url : 'updateSlideEdit.html',
11             data: {
12                 slideId:editId.eq(5).val(),
13                 slidePath:$('#imgUpPathslide').val(),
14                 slideUrl:editId.eq(2).children().eq(1).children().val(),
15                 slideTitle:editId.eq(3).children().eq(1).children().val(),
16                 slideRank:editId.eq(4).children().eq(1).children().val()},
17             dataType: "json",                    
18             success : function(response, status, xhr)
19             {
20                 /*console.log(data);*/
21                 var data = eval("("+response+")");
22                 if(status="success"){
23                     textGet.children().eq(1).children().attr("src",data.slidePath);
24                     textGet.children().eq(3).text(data.slideUrl);
25                     textGet.children().eq(2).text(data.slideTitle);
26                     textGet.children().eq(4).text(data.slideRank);
27                 }else{
28                     jAlert("操做失敗！","提示信息");
29                 }
30             }
31         });
32         
33         $(".add_picture").find("ul").removeClass("editnow");
34     });

意思就是將獲得的新的數據傳到後臺進行保存，保存成功後把數據再傳回來，修改頁面的值，異步刷新，由於修改了的同時要接着有變化才能夠，success：內的操做就是把新數據傳到最上面的圖片展現的代碼中。

 

下面的代碼就是刪除操做的js內容

 1     $("#slideBox").find(".del_imglist").live("click",function(event){//預覽中的刪除用的 slide
 2         var deleteId = $(this);
 3         $.ajax({
 4             type: "post",
 5             url : 'deleteSlideById.html',
 6             data: {slideId:deleteId.parent().parent().children().eq(0).text()},
 7             dataType: "json",                    
 8             success : function(data)
 9             {
10                 deleteId.parent().parent().remove();
11             }
12         });
13         unlimitedpagecut(show_per_page,0);
14         unlimitedpagecut(show_per_page,1);
15     });