0

我是 jQuery 的新手并且遇到了问题。在下面的简单代码片段中，我正在进行 ajax 调用以返回当前日期时间。如果我在页面加载后立即单击按钮，则会收到消息“按钮已单击”。WebMethod 也被调用。但是，我没有收到“成功”消息，在我看来，成功的回调函数没有被调用。但是当我在页面加载后等待几秒钟然后单击按钮时，一切正常。这是否意味着 jQuery 脚本需要时间来加载？如果是这种情况，当我在页面加载后不久单击按钮时，我是如何收到消息“按钮单击”的。

<script>

        $(document).ready(function () {
              $("#btnClick").click(function () {
                  GetDate();
              });
          });

       function GetDate() {
            alert("Button clicked!");
            $.ajax({
                type: "POST",
                url: "WebForm1.aspx/GetDate",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    alert("success");
                },
                error: function (msg) {
                    alert("error");
                }

            });
        }
</script>

<form runat="server">
   <asp:Button ID="btnClick" runat="server" />
</form>

//WebForm.aspx.cs
[System.Web.Services.WebMethod]
public static string GetDate()
{
  return DateTime.Now.ToString();
}
4

1 回答 1

0

您已订阅.click()按钮的事件，但尚未取消默认操作。因此，当用户单击此按钮时，ASP.NET 会向服务器执行 PostBack 并重定向您离开，从而没有时间执行 AJAX 请求。

以下是取消按钮默认操作的方法：

$(document).ready(function () {
    $("#btnClick").click(function () {
        GetDate();
        return false; // <!-- Cancel the default action of the button
    });
});

或者：

$(document).ready(function () {
    $("#btnClick").click(function (evt) {
        evt.preventDefault();  // <!-- Cancel the default action of the button
        GetDate();
    });
});

此外，您不需要dataType: 'json'AJAX 请求中的属性。您已将 contentType 标头设置为application/json意味着您正在调用的 Page Method 将返回 JSON 并设置正确的 Content-Type 响应标头。因此 jQuery 将使用此标头并已在成功回调中为您解析结果，您可以在其中直接显示它：

success: function(msg) {
    alert('Success. The result is ' + msg.d);
}

.d请注意我是如何在成功回调中使用该属性的。这是由于 ASP.NET 页面方法基础结构如何序列化 JSON 响应的性质。它看起来像这样：

{"d":"12/30/2012 12:45:02 PM"}
于 2012-12-30T10:40:53.460 回答