javascript的js调用

本来从一开始接触编程开始，自己就一直写后端，但是对于前端真的不会，但是没办法呀，公司
要做，所以，好吧，开始了写一写简单的javascript的内容
其中，在xxx.jsp页面中出现了这个

 <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">
     <i class="fa fa-level-up" aria-hidden="true"></i>
 </a>

还有这个

    <div id="level" style="padding-left:10px; padding-right:10px; display:none;" >
         <form>
             <div class="row form-group">
                 <div class="col-md-offset-2 col-sm-1 form-control-static"></div>
                 <div class="col-sm-8">
                     <div class="form-group">
                         <label class="col-sm-3 control-label">优先级：</label>
                         <div class="col-sm-6 mi-radio-right">
                             <select class="form-control" id="input_level" name="level">
                                 <c:forEach var="value" items="${levels}">
                                     <option value="${value}" <c:if test="${not empty adCreative and adCreative.priority eq value }">selected="selected"</c:if>>${value} </option>
                                 </c:forEach>
                             </select>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="row form-group">
                 <div class="col-md-offset-2 col-sm-1 form-control-static"></div>
                 <div class="col-sm-8">
                     <div class="form-group">
                         <label class="col-sm-8 control-label">备注:最高优先级为1,最低优先级为5</label>
                     </div>
                 </div>
             </div>
         </form>
     </div>

然后我们找到这个这个页面所依赖的js,这个js中其中一段代码如下:

 $("body").on('click' ,'a[mi-node-type="level"]', function(){
         var adCreativeId = $(this).attr('mi-node-data');
         var level = $(this).attr('mi-node-level');
         $("#input_level").val(level);

         var lay = modConfirm({
             title: '',
             content:'',
             yesBtn: '确 定',
             showsmall: ''
         })
         lay.find('.modal-body').append($("#level").show());

         lay.on("onYes",function(){
             var level = $("#input_level").val().trim();
             if (level == null || level == ""){
                 modAlert({
                     title : '提示',
                     content : '优先级不能为空!',
                 })
                 return;
             }

             $.ajax({
                 url: '/schedule/adcreative/updateCreativeLevel',
                 dataType: 'json',
                 cache: false,
                 type: 'get',
                 data : {
                     adCreativeId : adCreativeId,
                     level:level,
                     userId: GLOBAL.userId,
                     serviceToken: GLOBAL.serviceToken
                 },

                 success: function(json) {
                     if (json.success == true) {
                         modAlert({
                             title : '提示',
                             content : '修改优先级成功'
                         })
                         table.reset({});
                     } else {
                         modAlert({
                             title : '提示',
                             content : json.failMsg
                         })
                     }
                 },
                 error: function() {
                     modAlert({
                         title : '提示',
                         content : '网络异常，请稍后在试。',
                     })
                 }
             });

         });
     });

从这两段代码上来看，我们有如下几个问题
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中放入数据

 <select class="form-control" id="input_level" name="level">
         <c:forEach var="value" items="${levels}">
             <option value="${value}" <c:if test="${not empty adCreative and adCreative.priority eq value }">selected="selected"</c:if>>${value} </option>
         </c:forEach>
 </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的成功与失败以及信息

  $.ajax({
                 url: '/schedule/adcreative/updateCreativeLevel',
                 dataType: 'json',
                 cache: false,
                 type: 'get',
                 data : {
                     adCreativeId : adCreativeId,
                     level:level,
                     userId: GLOBAL.userId,
                     serviceToken: GLOBAL.serviceToken
                 },

                 success: function(json) {
                     if (json.success == true) {
                         modAlert({
                             title : '提示',
                             content : '修改优先级成功'
                         })
                         table.reset({});
                     } else {
                         modAlert({
                             title : '提示',
                             content : json.failMsg
                         })
                     }
                 },
                 error: function() {
                     modAlert({
                         title : '提示',
                         content : '网络异常，请稍后在试。',
                     })
                 }
             });

         });

其中
url:指的是这个ajax的调用异步调用后台的那一段代码
dataType:返回的类型是json的类型
cache:没有缓存数据
type:得到数据的方式
data : {
adCreativeId : adCreativeId,
level:level,
userId: GLOBAL.userId,
serviceToken: GLOBAL.serviceToken
},
里面传入数据的参数，我们可以在controller里面只接收其中的一部分数据就可以了
其中我们可以只接收adCreativeId的这个数据

  success: function(json) {
     if (json.success == true) {
         modAlert({
             title : '提示',
             content : '修改优先级成功'
                 })
         table.reset({});
     } else {
         modAlert({
             title : '提示',
             content : json.failMsg
             })
     }
         },
     error: function() {
         modAlert({
             title : '提示',
             content : '网络异常，请稍后在试。',
         })
     }

其中success是成功的时候返回的值
erro是失败的时候返回的值
table.reset({});这个是重新刷新页面的方法，应为有些页面只有在刷新一下，才可以看到真实的值

接下来，我们来调用如何调用function的方法
接下来我们先来看xxx.jsp中的一部分代码
第一段:

 <a class="btn btn-default btn-xs" href="javascript:;" mi-node-data="#{campaignId}" mi-node-level="" mi-node-type="alllevel" mi-node-param="campaignId">
     <i class="fa fa-level-up" aria-hidden="true"></i>
 </a>

第二段:

 <div id="alllevel" style="padding-left:10px; padding-right:10px; display:none;" >
     <form>
         <div class="row form-group">
             <div class="col-md-offset-2 col-sm-1 form-control-static"></div>
             <div class="col-sm-8">
                 <div class="form-group">
                     <label class="col-sm-3 control-label">优先级：</label>
                     <div class="col-sm-6 mi-radio-right">
                         <select class="form-control" id="input_level" name="level">
                             <c:forEach var="value" items="${levels}">
                                     <option value="${value}" selected="selected">${value} </option>
                             </c:forEach>
                         </select>
                     </div>
                     </div>
                 </div>
             </div>
         <div class="row form-group">
             <div class="col-md-offset-2 col-sm-1 form-control-static"></div>
             <div class="col-sm-8">
                 <div class="form-group">
                     <label class="col-sm-8 control-label">备注:最高优先级为1,最低优先级为5</label>
                 </div>
             </div>
         </div>
     </form>
 </div>

在xxx.js中调用的代码

  $("body").on('click' ,'a[mi-node-type="alllevel"]', function(){
         var campaignId = $(this).attr('mi-node-data');
             $.ajax({
                 url: '/schedule/campaign/getCampaignMinLevel',
                 dataType: 'json',
                 cache: false,
                 type: 'get',
                 data : {
                     campaignId : campaignId,
                     userId: GLOBAL.userId,
                     serviceToken: GLOBAL.serviceToken
                 },

                 success: function(json) {
                     if (json.success == true) {
                         func(campaignId,json.result)
                     } else {
                         modAlert({
                             title : '提示',
                             content : json.failMsg
                         })
                     }
                 },
                 error: function() {
                     modAlert({
                         title : '提示',
                         content : '网络异常，请稍后在试。',
                     })
                 }
             });
     });

     var func = function(myCampaignId,myLevel){
         var campaignId = myCampaignId;
         var level = myLevel;

         $("#input_level").val(level);
         var lay = modConfirm({
             title: '',
             content:'',
             yesBtn: '确 定',
             showsmall: ''
         })
         //下面这行语句就是把下面的jsp的弹出窗口添加进来
         lay.find('.modal-body').append($("#alllevel").show());

         lay.on("onYes",function(){
             var level = $("#input_level").val().trim();
             if (level == null || level == ""){
                 modAlert({
                     title : '提示',
                     content : '优先级不能为空!',
                 })
                 return;
             }

             $.ajax({
                 url: '/schedule/campaign/updateCampaignLevel',
                 dataType: 'json',
                 cache: false,
                 type: 'get',
                 data : {
                     campaignId : campaignId,
                     level:level,
                     userId: GLOBAL.userId,
                     serviceToken: GLOBAL.serviceToken
                 },

                 success: function(json) {
                     if (json.success == true) {
                         modAlert({
                             title : '提示',
                             content : '修改优先级成功'
                         })
                     } else {
                         modAlert({
                             title : '提示',
                             content : json.failMsg
                         })
                     }
                 },
                 error: function() {
                     modAlert({
                         title : '提示',
                         content : '网络异常，请稍后在试。',
                     })
                 }
             });

         });
     };

其中我们通过xxx.jsp中的mi-node-type来找到xxx.js来找到这段代码
然后成功的时候调用的是这个func(campaignId,json.result)方法，
我们可以看到这个func的方法的参数的第二个就是json的result的值，
是由于json都是k-v的类型的数据，所有我们可以通过json.result的数据值
然后后面都可以，我们这里面要记住的是，我们每一个人通过ajax的时候，
其实这个时候，我们每一个人都只需要关心json的是否成功以及msg的数据即可，
我们不需要想是否通过json来列出了数据库中的数据，我们不需要关心，因为这个
是只关心返回值的正确性，而由于异步调用，只是调用这一块的数据，对整个页面的数据
并没有进行修改，所以我们不需要考虑这些，可以留给前端的人进行考虑