0

嗨，我有我的第一个 AJAX JSON 工作，它返回 C5:3；在进行开发并将其显示在 div 中时，应该将 img 标签从 off.png 替换为 on.png 但这没有发生。如果有人能对此有所了解，将不胜感激？这是我的代码

          $("button.checkStatus").click(function(){
          //This Ajax checks the current on/off status of the passed X10 code
          $('img.checkStatus').each(function(i, obj) {
          $x10Device = $(this).data("x10");
          var postData = "url=http://local/tenHsServer/tenHsServer.aspx?t=ab&   
           f=DeviceStatus&d=" + $x10Device ;
           $.ajax({
                   type: "POST",
                   dataType: "json",
                   data: postData,
                   beforeSend: function(x) {
                   if(x && x.overrideMimeType) {
                   x.overrideMimeType("application/json;charset=UTF-8");
                   }
              },
            url: 'urlencodeJson.php',
            success: function(data) {
            // 'data' is a JSON object which we can access directly.
           // Evaluate the data.success member and do something appropriate...
          if (data.success == true){
              $('#section1').html(data.message);
              $("X10").data('src','lightbulbon.png');
          }
          else{
               $('#section2').html(data.message);
               $("X10").data('src','lightbulbon.png');
           }
           }
           });

的HTML

 <img src="lightbulboff.png" class="checkStatus" data-x10="C5">
 <img src="lightbulboff.png" class="checkStatus" data-x10="C6">
 <img src="lightbulboff.png" class="checkStatus" data-x10="C7">
 <button class="checkStatus">Device Status Check</button>
 <div id="section1"></div>
 <div id="section2"></div>

这真让我抓狂！！！在过去 2 天里尝试的每一种方法都能撞到一堵砖墙，如果我能破解它，那就太好了！！！！

非常感谢！！！

4

1 回答 1

1

我认为您可以更改几件事以使其正常工作，首先更改 ajax 请求中的成功部分：

 $("X10").data('src','lightbulbon.png');

这不会带你去任何地方，因为你什么都没有解决， insted 将你当前的对象保存在一个变量中并更改它（或使用 $(this) 上下文，这是你当前的图像对象）：

$(this).attr('src','lightbulbon.png');

另一件小事是您如何设置通话，虽然没有错，但这样做： 

    $x10Device = $(this).data("x10");


 var postData = "url=http://local/tenHsServer/tenHsServer.aspx?t=ab&   
       f=DeviceStatus&d=" + $x10Device ;

可能有点多余，并且在您设置发布请求时可能导致容易出错，只需像数组一样重写它：

data: {url : 'http://local/tenHsServer/tenHsServer.aspx?t=ab', 
                           f : 'DeviceStatus', 
                           d: $(this).data("x10") }

整个功能应该是这样的：

     $("button.checkStatus").click(function(){
                  $('img.checkStatus').each(function(i, obj) {
var element = $(this);
                   $.ajax({
                       type: "POST",
                       url: 'urlencodeJson.php',
                       dataType: "json",
                       data: { url : 'http://local/tenHsServer/tenHsServer.aspx?t=ab', 
                               f : 'DeviceStatus', 
                               d: $(this).data("x10") },
                       beforeSend: function(x) {
                           if(x && x.overrideMimeType) {
                           x.overrideMimeType("application/json;charset=UTF-8");
                           },
                       success: function(data) {
                          if (data.success == true){
                              $('#section1').html(data.message);
                              element.attr('src','lightbulbon.png');
                          }
                          else{
                               $('#section2').html(data.message);
                               element.attr('src','lightbulbon.png');
                           }
                       }
                   }); 
                  });
            });
于 2013-06-29T14:44:36.793 回答