动态修改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"}';



?>
复制代码

 

posted @   cogitoergosum  阅读(569)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手