AJAX第一次嘗試json數據元素不變

Question

嗨我有我的第一個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> 

這是推動我瘋了！如果我能破解它，那麼在過去的兩天中嘗試過的所有方法都會很棒！

非常感謝！

Answer 1

我想你可以改變一些事情，使它的工作原理，首先改變你的Ajax請求中的成功部分：

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

這不會導致你在任何地方，因爲你沒有解決， insted的節省您的當前對象的變量和改變它（或使用$（本）方面，其中，這是當前的圖像對象）：

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

另一個小東西是你如何建立呼叫，雖然它並不錯，在做：

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


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

可能是有點多餘，並可能導致簡單的錯誤，而你建立一個POST請求，只是重寫它像一個數組：

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'); 
          } 
         } 
        }); 
        }); 
      });