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

這次還是一些關於jQuery，ajax前后台傳值情況， 是自己在做點小東西過程中遇到的，記錄下來為自己也方便別人

列表很多，點擊編輯和刪除無刷新的進行操作的話，肯定是ajax了，因為無刷新嘛，可能有的朋友會說直接傳值，傳ID到Action刪除不就OK了，用得着寫js么，純粹自己找麻煩嘛。

其實這里重點是無刷新的啦， 這個上傳后到這里來，有個預覽功能，把本次的全部預覽，如果全部刷新的話，那么剛才上傳的就不會在這個頁面了，so，還是采用無刷新的比較好。

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

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

看代碼，

   <div class="editstuff" id="editstuffSlide">
        <div class="stuff_title"><div class="newlytitle">編輯內容</div><a class="closestuff"><img  width="35" height="35" src="backimg/stuffclose.png" ></a></div>
        <div class="newlylist">
            <div class="newlyhead"><span class="redletter">*</span>圖片：</div>
            <div class="newlycontent"><input type="button" class="upload_pic" value="上傳圖片"></div>
            <input type="file" onchange="updateImageslide(this)" id="imgUpFileSlide" name="tbdvdFile" />
                 <input type="hidden" id="imgUpPathslide"  name="imgUpPathslide" />
            <div id="slidePhoOKedit"></div>
        </div>
        <div class="newlylist">
            <div class="newlyhead"><span class="redletter">*</span>鏈接：</div>
            <div class="newlycontent"><input type="text" class="upload_url"></div>
        </div>
        <div class="newlylist">
            <div class="newlyhead">標題：</div>
            <div class="newlycontent"><input type="text" class="upload_title"></div>
        </div>
        <div class="newlylist">
            <div class="newlyhead">排序：</div>
            <div class="newlycontent"><input type="text" class="upload_oder"><div class="tip">填寫的數字越大，圖片排得越靠前。不填數字，默認按上傳時間排序。</div></div>
        </div>
        <input type="hidden" id="hiddenSlideId"  name="hiddenSlideId" />
        <input type="button" class="save_info editSaveSlide" value="保    存">
    </div>    

 

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

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

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

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

    $(".editSaveSlide").click(function () {
        $(this).parent().css("display","none");
        $("#fadeshow").css("display","none");
        
        var editId=$(".editstuff").children();
        var textGet = $(".editnow");
        
        $.ajax({        //預覽前的編輯后保存按鈕操作 slide
            type: "post",
            url : 'updateSlideEdit.html',
            data: {
                slideId:editId.eq(5).val(),
                slidePath:$('#imgUpPathslide').val(),
                slideUrl:editId.eq(2).children().eq(1).children().val(),
                slideTitle:editId.eq(3).children().eq(1).children().val(),
                slideRank:editId.eq(4).children().eq(1).children().val()},
            dataType: "json",                    
            success : function(response, status, xhr)
            {
                /*console.log(data);*/
                var data = eval("("+response+")");
                if(status="success"){
                    textGet.children().eq(1).children().attr("src",data.slidePath);
                    textGet.children().eq(3).text(data.slideUrl);
                    textGet.children().eq(2).text(data.slideTitle);
                    textGet.children().eq(4).text(data.slideRank);
                }else{
                    jAlert("操作失敗！","提示信息");
                }
            }
        });
        
        $(".add_picture").find("ul").removeClass("editnow");
    });

意思就是將得到的新的數據傳到后台進行保存，保存成功后把數據再傳回來，修改頁面的值，異步刷新，因為修改了的同時要接着有變化才可以，success：內的操作就是把新數據傳到最上面的圖片展示的代碼中。

 

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

    $("#slideBox").find(".del_imglist").live("click",function(event){//預覽中的刪除用的 slide
        var deleteId = $(this);
        $.ajax({
            type: "post",
            url : 'deleteSlideById.html',
            data: {slideId:deleteId.parent().parent().children().eq(0).text()},
            dataType: "json",                    
            success : function(data)
            {
                deleteId.parent().parent().remove();
            }
        });
        unlimitedpagecut(show_per_page,0);
        unlimitedpagecut(show_per_page,1);
    });