本来从一开始接触编程开始，自己就一直写后端，但是对于前端真的不会，但是没办法呀，公司
要做，所以，好吧，开始了写一写简单的javascript的内容
其中，在xxx.jsp页面中出现了这个
1 <a class="btn btn-default btn-xs" href="javascript:;" mi-node-data="#{id}" mi-node-level="#{priority}" mi-node-type="level" mi-node-param="adCreativeId"> 2 <i class="fa fa-level-up" aria-hidden="true"></i> 3 </a>
还有这个
1 <div id="level" style="padding-left:10px; padding-right:10px; display:none;" > 2 <form> 3 <div class="row form-group"> 4 <div class="col-md-offset-2 col-sm-1 form-control-static"></div> 5 <div class="col-sm-8"> 6 <div class="form-group"> 7 <label class="col-sm-3 control-label">优先级：</label> 8 <div class="col-sm-6 mi-radio-right"> 9 <select class="form-control" id="input_level" name="level"> 10 <c:forEach var="value" items="${levels}"> 11 <option value="${value}" <c:if test="${not empty adCreative and adCreative.priority eq value }">selected="selected"</c:if>>${value} </option> 12 </c:forEach> 13 </select> 14 </div> 15 </div> 16 </div> 17 </div> 18 <div class="row form-group"> 19 <div class="col-md-offset-2 col-sm-1 form-control-static"></div> 20 <div class="col-sm-8"> 21 <div class="form-group"> 22 <label class="col-sm-8 control-label">备注:最高优先级为1,最低优先级为5</label> 23 </div> 24 </div> 25 </div> 26 </form> 27 </div>
然后我们找到这个这个页面所依赖的js,这个js中其中一段代码如下:
1 $("body").on('click' ,'a[mi-node-type="level"]', function(){ 2 var adCreativeId = $(this).attr('mi-node-data'); 3 var level = $(this).attr('mi-node-level'); 4 $("#input_level").val(level); 5 6 var lay = modConfirm({ 7 title: '', 8 content:'', 9 yesBtn: '确 定', 10 showsmall: '' 11 }) 12 lay.find('.modal-body').append($("#level").show()); 13 14 lay.on("onYes",function(){ 15 var level = $("#input_level").val().trim(); 16 if (level == null || level == ""){ 17 modAlert({ 18 title : '提示', 19 content : '优先级不能为空!', 20 }) 21 return; 22 } 23 24 $.ajax({ 25 url: '/schedule/adcreative/updateCreativeLevel', 26 dataType: 'json', 27 cache: false, 28 type: 'get', 29 data : { 30 adCreativeId : adCreativeId, 31 level:level, 32 userId: GLOBAL.userId, 33 serviceToken: GLOBAL.serviceToken 34 }, 35 36 success: function(json) { 37 if (json.success == true) { 38 modAlert({ 39 title : '提示', 40 content : '修改优先级成功' 41 }) 42 table.reset({}); 43 } else { 44 modAlert({ 45 title : '提示', 46 content : json.failMsg 47 }) 48 } 49 }, 50 error: function() { 51 modAlert({ 52 title : '提示', 53 content : '网络异常，请稍后在试。', 54 }) 55 } 56 }); 57 58 }); 59 });
从这两段代码上来看，我们有如下几个问题
1.为什么这个jsp中的代码知道调用的是js中的这个js.
我们可以看到在xxx.jsp中出现了mi-node-type="level"则刚好对应xxx.js中的 $("body").on('click' ,'a[mi-node-type="level"]', function(){
的level则，就可以确定调用这一块代码
2.知道了这个调用这个xxx.js中的这段代码，可以解释一下里面的数据
其中 $("#input_level").val(level);这个说的是在xxx.jsp中放入数据
1 <select class="form-control" id="input_level" name="level"> 2 <c:forEach var="value" items="${levels}"> 3 <option value="${value}" <c:if test="${not empty adCreative and adCreative.priority eq value }">selected="selected"</c:if>>${value} </option> 4 </c:forEach> 5 </select>
其中这个$("#input_level")里面放的是select的总量
3.xxx.js中lay.find('.modal-body').append($("#level").show());的这个代码是说在这个页面后面添加id为level的页面，也就是xxx.jsp中的
<div id="level" style="padding-left:10px; padding-right:10px; display:none;" >
4.然后接下来就是ajax的调用，这个其实就是返回json的成功与失败以及信息
1 $.ajax({ 2 url: '/schedule/adcreative/updateCreativeLevel', 3 dataType: 'json', 4 cache: false, 5 type: 'get', 6 data : { 7 adCreativeId : adCreativeId, 8 level:level, 9 userId: GLOBAL.userId, 10 serviceToken: GLOBAL.serviceToken 11 }, 12 13 success: function(json) { 14 if (json.success == true) { 15 modAlert({ 16 title : '提示', 17 content : '修改优先级成功' 18 }) 19 table.reset({}); 20 } else { 21 modAlert({ 22 title : '提示', 23 content : json.failMsg 24 }) 25 } 26 }, 27 error: function() { 28 modAlert({ 29 title : '提示', 30 content : '网络异常，请稍后在试。', 31 }) 32 } 33 }); 34 35 });
其中
url:指的是这个ajax的调用异步调用后台的那一段代码
dataType:返回的类型是json的类型
cache:没有缓存数据
type:得到数据的方式
data : {
adCreativeId : adCreativeId,
level:level,
userId: GLOBAL.userId,
serviceToken: GLOBAL.serviceToken
},
里面传入数据的参数，我们可以在controller里面只接收其中的一部分数据就可以了
其中我们可以只接收adCreativeId的这个数据
1 success: function(json) { 2 if (json.success == true) { 3 modAlert({ 4 title : '提示', 5 content : '修改优先级成功' 6 }) 7 table.reset({}); 8 } else { 9 modAlert({ 10 title : '提示', 11 content : json.failMsg 12 }) 13 } 14 }, 15 error: function() { 16 modAlert({ 17 title : '提示', 18 content : '网络异常，请稍后在试。', 19 }) 20 }
其中success是成功的时候返回的值
erro是失败的时候返回的值
table.reset({});这个是重新刷新页面的方法，应为有些页面只有在刷新一下，才可以看到真实的值
接下来，我们来调用如何调用function的方法
接下来我们先来看xxx.jsp中的一部分代码
第一段:
1 <a class="btn btn-default btn-xs" href="javascript:;" mi-node-data="#{campaignId}" mi-node-level="" mi-node-type="alllevel" mi-node-param="campaignId"> 2 <i class="fa fa-level-up" aria-hidden="true"></i> 3 </a>
第二段:
1 <div id="alllevel" style="padding-left:10px; padding-right:10px; display:none;" > 2 <form> 3 <div class="row form-group"> 4 <div class="col-md-offset-2 col-sm-1 form-control-static"></div> 5 <div class="col-sm-8"> 6 <div class="form-group"> 7 <label class="col-sm-3 control-label">优先级：</label> 8 <div class="col-sm-6 mi-radio-right"> 9 <select class="form-control" id="input_level" name="level"> 10 <c:forEach var="value" items="${levels}"> 11 <option value="${value}" selected="selected">${value} </option> 12 </c:forEach> 13 </select> 14 </div> 15 </div> 16 </div> 17 </div> 18 <div class="row form-group"> 19 <div class="col-md-offset-2 col-sm-1 form-control-static"></div> 20 <div class="col-sm-8"> 21 <div class="form-group"> 22 <label class="col-sm-8 control-label">备注:最高优先级为1,最低优先级为5</label> 23 </div> 24 </div> 25 </div> 26 </form> 27 </div>
在xxx.js中调用的代码
1 $("body").on('click' ,'a[mi-node-type="alllevel"]', function(){ 2 var campaignId = $(this).attr('mi-node-data'); 3 $.ajax({ 4 url: '/schedule/campaign/getCampaignMinLevel', 5 dataType: 'json', 6 cache: false, 7 type: 'get', 8 data : { 9 campaignId : campaignId, 10 userId: GLOBAL.userId, 11 serviceToken: GLOBAL.serviceToken 12 }, 13 14 success: function(json) { 15 if (json.success == true) { 16 func(campaignId,json.result) 17 } else { 18 modAlert({ 19 title : '提示', 20 content : json.failMsg 21 }) 22 } 23 }, 24 error: function() { 25 modAlert({ 26 title : '提示', 27 content : '网络异常，请稍后在试。', 28 }) 29 } 30 }); 31 }); 32 33 var func = function(myCampaignId,myLevel){ 34 var campaignId = myCampaignId; 35 var level = myLevel; 36 37 $("#input_level").val(level); 38 var lay = modConfirm({ 39 title: '', 40 content:'', 41 yesBtn: '确 定', 42 showsmall: '' 43 }) 44 //下面这行语句就是把下面的jsp的弹出窗口添加进来 45 lay.find('.modal-body').append($("#alllevel").show()); 46 47 lay.on("onYes",function(){ 48 var level = $("#input_level").val().trim(); 49 if (level == null || level == ""){ 50 modAlert({ 51 title : '提示', 52 content : '优先级不能为空!', 53 }) 54 return; 55 } 56 57 $.ajax({ 58 url: '/schedule/campaign/updateCampaignLevel', 59 dataType: 'json', 60 cache: false, 61 type: 'get', 62 data : { 63 campaignId : campaignId, 64 level:level, 65 userId: GLOBAL.userId, 66 serviceToken: GLOBAL.serviceToken 67 }, 68 69 success: function(json) { 70 if (json.success == true) { 71 modAlert({ 72 title : '提示', 73 content : '修改优先级成功' 74 }) 75 } else { 76 modAlert({ 77 title : '提示', 78 content : json.failMsg 79 }) 80 } 81 }, 82 error: function() { 83 modAlert({ 84 title : '提示', 85 content : '网络异常，请稍后在试。', 86 }) 87 } 88 }); 89 90 }); 91 };
其中我们通过xxx.jsp中的mi-node-type来找到xxx.js来找到这段代码
然后成功的时候调用的是这个func(campaignId,json.result)方法，
我们可以看到这个func的方法的参数的第二个就是json的result的值，
是由于json都是k-v的类型的数据，所有我们可以通过json.result的数据值
然后后面都可以，我们这里面要记住的是，我们每一个人通过ajax的时候，
其实这个时候，我们每一个人都只需要关心json的是否成功以及msg的数据即可，
我们不需要想是否通过json来列出了数据库中的数据，我们不需要关心，因为这个
是只关心返回值的正确性，而由于异步调用，只是调用这一块的数据，对整个页面的数据
并没有进行修改，所以我们不需要考虑这些，可以留给前端的人进行考虑