javascript的js调用

本来从一开始接触编程开始，自己就一直写后端，但是对于前端真的不会，但是没办法呀，公司
要做，所以，好吧，开始了写一写简单的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来列出了数据库中的数据，我们不需要关心，因为这个
是只关心返回值的正确性，而由于异步调用，只是调用这一块的数据，对整个页面的数据
并没有进行修改，所以我们不需要考虑这些，可以留给前端的人进行考虑

posted @ 2017-03-17 21:02 蜗牛不爱海绵宝宝阅读(292) 评论(0) 编辑收藏举报

刷新页面返回顶部

蜗牛不爱海绵宝宝

javascript的js调用

公告