なぜこのJQueryはasp.netページ呼び出しを呼び出してページ全体を読み込みますか？ここ

Question

は私のhtmlの抜粋です：として定義

<input id="btnGetDate" type="submit" value="Get Date" /> 
    <div id="Result"></div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#btnGetDate").click(function() { 
      $.ajax({ 
       type: "POST", 
       url: "Date.aspx/GetDate", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(msg) { 
        $("#Result").text(msg.d); 
       } 
      }); 
     }); 
    }); 

</script> 

マイページメソッドIDは次のとおりです。

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

を私が手日付ボタンをクリックすると、私は、画面上の日付のフラッシュを見ましたしかし、ページ全体がロードされているので、消えてしまいます。私は火かき棒で見ると、POSTを行っているのが見えますが、すぐに消えています。どのようにこれを解決するための任意のアイデア？

Answer 1

があなたの$("#btnGetDate").click()イベントハンドラから偽を返して試してみてください。

$("#btnGetDate").click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "Date.aspx/GetDate", 
      data: "{}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 
       $("#Result").text(msg.d); 
      } 
     }); 
     return false; 
    }); 

Answer 2

karim79のソリューションは、Internet Explorerで仕事をする - しかし、それは同様にFirefoxや他のブラウザで動作することを確認するために、あなたはおそらくしたいですclickイベントを受け取るクリックハンドラに入力引数を追加し、イベントを停止します。

$("#btnGetDate").click(function(ev) { 
    ev.stopPropagation(); 
    $.ajax({ 
     type: "POST", 
     url: "Date.aspx/GetDate", 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(msg) { 
      $("#Result").text(msg.d); 
     } 
    }); 
    return false; 
});