zoukankan      html  css  js  c++  java
  • 动态修改attr里的多个属性

    要点:

            1、js将字符串转化为object方法,通过新建函数。

            2、通过ajax返回的数据是object类型。

            3、jquery.attr()里的attr是object类型

    例子:主要实现后台返回的attr里的两个参数,将两个参数直接应用赋值

    ajax前端请求:

    <html>
    <head>
        <title>jquery 同时修改两个属性</title>
    </head>
    
    </html>
    
    <script src="extlib/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="extlib/JSON-js-master/json_parse.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      /*** json 格式字符串转化为 javascript object ***/
    
                  function parseObj( strData ){
    
                         return (new Function( "return " + strData ))();
    
                  }
    
         $.ajax({
             url: 'retJson.php',
             type: 'POST',
             dataType: 'json',
             data: {param1: 'value1'},
             success:function(data) 
             {
    
                /**
                 * [imgAttr ajax接收到的data是object对象]
                 * @type {[object]}
                 */
                imgAttrStr = data['img'];
    
          
            
    
               /**
                * 将object 转化为json字符串
                * [str 将object解析json字符串]
                * @type {[string]}
                */
               var str = JSON.stringify(data);
               alert(str);
    
               /**
                * 将json字符串转化object
                * [object parseJSON与eval("("+str+")")]等价
                * @type {[object]}
                * object 
                */
               var jsonObject = $.parseJSON(str);
               var jsonObject =  eval("("+str+")");
              
              
                 /**
                * [imgAttr 将“字符串”转化对象,修改attr属性]
                * $("#").attr(object)
                * @type {[object]}
                */
               imgAttrObject = parseObj(imgAttrStr);
               // alert(typeof(imgAttr));
    
               $("#img_switch").attr(imgAttrObject);
                
    
             }
         });
      
    
    </script>
    
    
    <body>
    
    <div>
        <img id="img_switch" src="images/ups_ac_fail.gif" height="216" width="450" alt="UPS断线">
    </div>
    
    </body>

    php后台数据返回

    <?php 
    
    
    
    
    echo "{"img":"{'src':'images/ups_online.gif','alt':'UPS在线'}" }";
    // echo '{"img":"images/ups_online.gif"}';
    
    
    
    ?>
  • 相关阅读:
    unittest用法和report输出
    python断言方式
    python闭包等
    html 基础
    Python装饰器
    python递归取出n层嵌套列表里的所有元素
    pycharm问题集锦
    Coding the Futurn
    python3-端口扫描(TCP_ACK扫描,NULL扫描,windows扫描,xmas扫描)
    python3-端口扫描(TCP connect扫描,SYN扫描,FIN扫描)
  • 原文地址:https://www.cnblogs.com/hzijone/p/4783962.html
Copyright © 2011-2022 走看看