首页 > 代码库 > web基础知识(二)关于ajax,Jquery传值最基础东西
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 = http://www.mamicode.com/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 });
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。