码迷,mamicode.com
首页 > Web开发 > 详细

web基础知识(二)关于ajax,Jquery传值最基础东西

时间:2014-06-27 20:46:27      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   blog   code   http   

这次还是一些关于jQuery,ajax前后台传值情况, 是自己在做点小东西过程中遇到的,记录下来为自己也方便别人

bubuko.com,布布扣

列表很多,点击编辑和删除无刷新的进行操作的话,肯定是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     });

 

 

web基础知识(二)关于ajax,Jquery传值最基础东西,布布扣,bubuko.com

web基础知识(二)关于ajax,Jquery传值最基础东西

标签:des   style   class   blog   code   http   

原文地址:http://www.cnblogs.com/2589-spark/p/3807587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!