javascript - 有人可以帮我处理我的 ajax 代码吗？

Question

我想将缩略图的可见性更改为单击按钮后立即可见，我该怎么办？请帮助我解决这个问题，因为我自己无法弄清楚，因为我对 ajax 和网络编程不太了解。提前致谢。

function ha(){
 $('#tabExe').click(function(event){
   $.ajax({
      url:'backEnd/ROOMS.php',
      success:function(result){
        $('#room1').css({ // this is just for style        
          "visibility" : "visible",
        });	
      }
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button style="border-radius:0px;" type="submit" name="tabExe" onClick="function ha();" id="tabExe" href="#Exec" class="btn btn-primary">
  Executive Room
</button>
            
<div id = "rm1" class="col-xs-12 col-md-3">
  <a id="room1" value="sa" href="#" class="thumbnail" style="visibility:hidden;">
    <img class="img-responsive" src="../backEnd/res/img/login/roomActive.png" style="width:100px;">
  </a>
</div>

Answer 1

如果您只需要显示缩略图(并且不关心响应)，请包含 beforeSend 回调，如下所示:

$('#tabExe').click(function(event){
    $.ajax({
        url:'backEnd/ROOMS.php',
        beforeSend: function() {
            $('#room1').css({ // this is just for style        
                "visibility" : "visible",
            }); 
        },
        success:function(result){

        }
    });
});

这将在发出 ajax 请求之前调用。 success 和 error 仅在请求完成时调用。

这是一个 fiddle 演示:

http://jsfiddle.net/jpattishalljr/rzr5mrL1/

编辑:如果您需要在响应返回时显示缩略图，那么您需要查看 ajax 响应并了解为什么 success 没有被调用。一种测试方法是添加 complete，如下所示:

$('#tabExe').click(function(event){
    $.ajax({
        url:'backEnd/ROOMS.php',
        beforeSend: function() {
            $('#room1').css({ // this is just for style        
                "visibility" : "visible",
            }); 
        },
        success:function(result){

        },
        complete: function(results) {
            alert(results.status);
        }
    });
});

http://jsfiddle.net/jpattishalljr/rzr5mrL1/1/

应发出警报 (404)

祝你好运。