• artDialog中的time参数,ajax请求中的异步与同步


    一artDialog中的time参数,是用来表示几秒钟之后关闭对话框。

    但是在用的时候发现一个问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="http://s.hqbcdn.com/favicon/favicon.ico" />
    <title>artdialog中的time属性</title>
    <meta name='keywords' content=""/>
    <meta name='description' content=""/>
    <meta name="viewport" content="width=device-width,maximum-scale=2.0, user-scalable=yes" />
    <link rel="stylesheet" type="text/css" href="artDialog/dialog.css" />
    <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="artDialog/artDialog.js"></script>
    </head> <body> <input type="button" value="click me" id="test_button" /> <script type="text/javascript"> $(function(){ $('#test_button').click( function(){ art.dialog({ id : "", title : '', content : '我将在3秒后消失,消失后继续执行程序', width : 300, height : 200, margin : 0, padding : 0, time : 2 }) }); art.dialog({ id : "", title : '', content : '我是继续执行的程序', width : 300, height : 200, margin : 0, padding : 0, time : 2 }) }) </script> </body> </html>

    在弹出对话框之后,程序不能继续执行。

    在解决办法就是将后续的程序放在close() 函数中执行。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="http://s.hqbcdn.com/favicon/favicon.ico" />
    <title>artdialog中的time属性</title>
    <meta name='keywords' content=""/>
    <meta name='description' content=""/>
    <meta name="viewport" content="width=device-width,maximum-scale=2.0, user-scalable=yes" />
    <link rel="stylesheet" type="text/css" href="artDialog/dialog.css" />
    <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="artDialog/artDialog.js"></script>
    </head>
    <body>
    <input type="button" value="click me" id="test_button" /> 
    <script type="text/javascript">
    $(function(){
        $('#test_button').click(
            function(){
                art.dialog({
                    id : "",
                    title : '',
                    content : '我将在3秒后消失,消失后继续执行程序',
                    width : 300,
                    height : 200,
                    margin : 0,
                    padding : 0,
                    time : 2,
                   close: function(){
                       art.dialog({
                          id : "",
                    title : '',
                    content : '我是继续执行的程序',
                    width : 300,
                    height : 200,
                    margin : 0,
                    padding : 0,
                })    
                  }    
                })    
        });   
    })
    </script>
    </body>
    </html>                        

    问题得到解决

    二,ajax中的请求有异步和同步之分。

    ajax中的请求有异步和同步之分,在默认的请求中async默认为true,如果要设置为同步请求,修改为false。

    在工作中,做一个预约抢购活动。业务逻辑是,在预约阶段,如何用户已预约,将展示预约码,不展示“立即预约”按钮。

    但是问题是,在后面的程序中 预约码变量 order_num 总是为null。

    经过调试,发现是因为获取预约码的ajax请求是异步方式,后续代码是执行时接口并未获得预约码的值,因此,一直报错。

    代码片段:

       /*查询预约码*/
        $.ajax({
            url : "http://www.okhqb.com/item/getMemberBookingCode.json?eventId=581",
            type : "GET",
            dataType : 'jsonp',
            jsonp : 'callback',
            success : function (result) {
                if( result.code == 200 ){
                        order_num = result.data;
                        
                }
            }
        });
    
        /*预约中*/
        if( order_end > currentime  ){    
             initOrder();
        }else if(  currentime > order_end && kq_time > currentime ){
             initWait();/*等待开抢*/
        }else if(  currentime > kq_time && act_end > currentime ){
             initQiang();/*抢购开始*/
        }else if(currentime > act_end) {
              initEnd();/*抢购活动结束*/
        }
    
        /*初始化预约状态*/
        function initOrder(){
            /*处理状态*/        
            $('#process_line').addClass('process_line1');
            $('#node1').addClass('node1_ok');
            $('#node2').addClass('node2_no');
            $('#node3').addClass('node3_no');
            $('.note_text1').addClass('curr');
            if( !order_num){
                          $('#btn_state').removeClass().addClass('order_btn');
                     }else{
                var _html = '<p class="order_num">您的预约码是:<span id="order_num">'+ order_num +'</span></p>';
               $('.login_hm').before(_html);
                    }
    
            cc = setInterval(_countLeave, 1000);
        }


    解决方法是:将异步修改成同步,但是因为是跨域请求,数据格式是jsonp。不能同步。有一个好方法,将业务逻辑放在请求成功中执行

    /*查询预约码*/
        $.ajax({
            url : "http://www.okhqb.com/item/getMemberBookingCode.json?eventId=581",
            type : "GET",
            dataType : 'jsonp',
            jsonp : 'callback',
            success : function (result) {
                if( result.code == 200 ){
                        order_num = result.data;
                        
                }
                /*预约中*/
                if( order_end > currentime  ){    
                    initOrder();
                }else if(  currentime > order_end && kq_time > currentime ){
                    initWait();/*等待开抢*/
                }else if(  currentime > kq_time && act_end > currentime ){
                    initQiang();/*抢购开始*/
                }else if(currentime > act_end) {
                    initEnd();/*抢购活动结束*/
                }
            }
        });

    这样,不管请求有多慢,都不会取不到值,而出错。

  • 相关阅读:
    表现层(jsp)、持久层(类似dao)、业务层(逻辑层、service层)、模型(javabean)、控制层(action)
    理解HTTP session原理及应用
    “不同浏览器对于同一域名的并发获取(加载)资源数是有限的”
    URL编码与解码
    URL和URI的区别与联系
    spring 源代码地址
    java_ant详解
    Struts2 Convention插件的使用
    Struts2的@ResultPath
    Java Annotation原理分析(一)
  • 原文地址:https://www.cnblogs.com/huanhuan8808/p/3633923.html
Copyright © 2020-2023  润新知