Question

我的asp.net页面中有一个html按钮。

当我点击这个按钮时，它调用一个jquery来用移动的gif进度条替换<div>的内容。虽然这显示我还想调用另一个web方法，它将精灵加载到相同的<div>，因此用我的图像替换进度条。

我得到了进度条显示但有点丢失了如何继续使用代码获得下一位。

这是我到目前为止所拥有的......

标记

<div id="divTest"></div>
<input id="Button1" type="button" value="button" />
<script type="text/javascript">
$("#<%=btnPlay.ClientID%>").click(function () {
    $.ajax({
    type: "POST",
    url: "Feed2.aspx/Test",
    data: "{}",
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (msg)     {                                                            
   $("#divTest").html(msg.d);
   //OK gif is now showing. Now i want to call another web method.
   }
   });
  });
 </script>

背后的代码中的

[WebMethod]
public static string test()
{
string _div = "<div id=\"divBsy\" class=\"background\" style=\"background-position: center center;";
_div = _div + "background-image: url('../Images/ajax-loader.gif'); height: 394px; width: 633px;";
_div = _div + "background-repeat: no-repeat;\" align=\"center\">";
_div = _div + "</div>";
return _div;
}

Answer 1

在您正在调用的web方法上调用该函数内的其他函数。如果您需要控制哪一个呼叫，您可以使用您已经拥有的“data：{}”发送该信息。

data: {
    method: 'whatevermthod'
}

然后你从post变量得到它。只需在与其他代码一起使用_div内容的同一文档中声明您的函数。

Answer 2

你可以使用承诺：

    $.when($.ajax({
       type: "POST",
       url: "Feed2.aspx/Test",
       data: "{}",
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (msg) {                                                            
         $("#divTest").html(msg.d);
         //OK gif is now showing. Now i want to call another web method.
       }
      });
    )).then(function() {
      $.ajax({
        type: "POST",
        url: "Feed2.aspx/Test2SpriteLoad",
        data: "{id: 1}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg)     {                                                            
           $("#divTest").html(msg.d);
        }
      });
    });

在服务器上

[WebMethod]
public static string Test2SpriteLoad(int id)
{
    var spriteUri = GetSpriteUriById(id);

    string _div = "<div id=\"divBsy\" class=\"background\" style=\"background-position: center center;";
    _div = _div + "background-image: url('" + spriteUri + "'); height: 394px; width: 633px;";
    _div = _div + "background-repeat: no-repeat;\" align=\"center\">";
    _div = _div + "</div>";
    return _div;
}

Answer 3

你应该避免第一次加载gif的请求，你应该调用加载实际数据并使用beforeSend选项来显示加载gif，如果你首先进行一个类，这可以简化你的CSS是这样的：

.loading {
    background: url('../Images/ajax-loader.gif') center center no-repeat;
    height: 394px;
    width: 633px;
}

然后ajax调用看起来像这样：

$("#<%=btnPlay.ClientID%>").click(function () {
    var $theDiv = $("#divTest");
    $.ajax({
        type: "POST",
        url: "Feed2.aspx/Test2", //url to get content
        dataType: "json",
        beforeSend: function(){
            //Show loading gif
            var loadingDiv = '<div class="loading"></div>';
            $theDiv.html(loadingDiv);
        },
        success: function (msg) {
            //replace gif with content
            $theDiv.html(msg);
        }
    });
});

我可以从jquery ajax调用2个函数吗？

3 个答案: