Question

我是jQuery的新手并遇到问题。在下面的简单代码片段中，我正在进行ajax调用以返回当前日期时间。如果我在页面加载时单击该按钮，则会收到消息“Button Clicked”。 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();
}

Answer 1

您已订阅该按钮的.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();
    });
});

此外，您不需要AJAX请求中的dataType: 'json'属性。您已将contentType标头设置为application/json，这意味着您正在调用的Page方法将返回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"}

一旦页面加载，jQuery ajax回调函数就不会触发

1 个答案: