0

私はjQueryの初心者であり、問​​題が発生しています。以下の簡単なコードスニペットでは、現在の日時を返すためにajax呼び出しを行っています。ページが読み込まれるとすぐにボタンをクリックすると、「ボタンがクリックされました」というメッセージが表示されます。WebMethodも呼び出されます。ただし、成功時のコールバック関数が呼び出されていないように見える「success」というメッセージは表示されません。ただし、ページが読み込まれてから数秒待ってからボタンをクリックすると、問題なく動作します。これは、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 はサーバーへのポストバックを実行し、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 リクエストにプロパティは必要ありません。application/json呼び出しているページ メソッドが JSON を返し、適切な Content-Type 応答ヘッダーを設定することを意味するように contentType ヘッダーを設定しました。したがって、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 に答える