为什么这个对 asp.net pagemethod 的 JQuery 调用会加载整个页面？答案

【问题标题】：Why does this JQuery call to asp.net pagemethod load the whole page?为什么这个对 asp.net pagemethod 的 JQuery 调用会加载整个页面？
【发布时间】：2009-06-09 22:03:58
【问题描述】：

这是我的 html 的 sn-p：

<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>

My Page Method id 定义如下：

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

当我点击获取日期按钮时，我看到日期在屏幕上闪烁了一秒钟，但由于整个页面正在加载，它消失了，当我在 firebug 中查看它时，我看到它正在执行 POST，但是迅速消失。有关如何解决此问题的任何想法？

【问题讨论】：

标签： asp.net jquery pagemethods

【解决方案1】：

尝试从您的 $("#btnGetDate").click() 事件处理程序返回 false：

    $("#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;
    });

【讨论】：

【解决方案2】：

karim79 的解决方案将在 Internet Explorer 中完成这项工作 - 但为了确保它在 Firefox 和其他浏览器中也能正常工作，您可能希望向单击处理程序添加一个输入参数，该处理程序将接受单击事件，并停止事件。

$("#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;
});

【讨论】：