使用 ajax 的 Jquery 使用 asp.net答案

【问题标题】：Jquery with ajax using asp.net使用 ajax 的 Jquery 使用 asp.net
【发布时间】：2011-08-09 10:12:28
【问题描述】：

我第一次在 asp.net 中使用 ajax。在那里，我正在尝试学习一些 Jquery。我创建了一个包含一个按钮的 aspx 文件，当单击它时，它将记下当前日期。目前，当我单击按钮时没有任何反应。我可以看到 Jscripts 通过使用 firebug 正在运行，但它们不会触发我的警报。有什么想法吗？

代码如下。

这是我的 Jscript：

$(document).ready(function () {

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

                alert('About to replace content');
                $("#Result").text(msg.d);
            }
        });
    });
});

这是我的 aspx 文件：

<html>
<head>
    <title></title>
    <script src="jquery/JScript1.js" type="text/javascript"></script>
    <script src="jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<form runat="server">
      <input id="Result" type="submit" value="Click here for the time."/>
      </form>
</body>
</html>

这是我的 aspx 代码隐藏：

public partial class index : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

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

使用示例：http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

这是工作版本：

Jscript:

$(document).ready(function () {

    $("#Result").click(function () {

        $.ajax({
            type: "POST",
            url: "index.aspx/GetDate",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert('About to replace content');
                $("#Result").val(msg.d);
            }
        });
    });
});

aspx:

<html>
<head>
    <title>Calling a page method with jQuery</title>
    <script src="jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery/JScript1.js" type="text/javascript"></script>
</head>
<body>
    <form runat="server">
    <input id="Result" type="button" value="Click here for the time." />

    </form>
</body>
</html>

代码隐藏：

 public partial class index : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string GetDate()
        {

            return DateTime.Now.ToString();
        }
    }

【问题讨论】：

您在 FireBug 中有任何错误吗？ HTTP POST 的响应显示什么？
仔细检查包含静态GetDate方法的文件名，是Index.aspx的Default.aspx吗？
您应该从问题中删除解决方案并将其添加为答案。

标签： asp.net jquery

【解决方案1】：

由于小错误，代码将无法运行。

解决这些问题，你会没事的。

您正在从public partial class index : Page 调用页面方法，而理想情况下它应该从Default: Page
您正在使用提交按钮，因此您应该使用evt.preventDefault()；
您正在更改按钮的值，因此要使用的方法是.val() 而不是~~.text~~
最后，save yourself from some typing with the new Encosia article。

示例代码

$(document).ready(function () {

    $("#Result").click(function (evt) {
        evt.preventDefault();

        $.ajax({
            type: "POST",
            url: "Test1.aspx/GetDate",
            data: "{}",
            contentType: "application/json",
            success: function (msg) {
                $("#Result").val(msg.d);
            }
        });

    });

});

编码愉快！

【讨论】：

【解决方案2】：

当您单击“结果”按钮时，您的页面是否刷新。它看起来像是一个提交按钮，因此会进行回发。这将使它看起来像什么都没有发生。尝试将按钮更改为普通按钮。

另外，您并没有真正从您的 WebMethod 返回 json。

【讨论】：

【解决方案3】：

在你参考的文章中作者使用了一个div来触发Ajax调用-

 <div id="Result">Click here for the time.</div>

您正在使用提交按钮，我认为回发可能会破坏您的 Ajax 请求，请尝试将您的按钮声明更改为此 -

<input id="Result" type="button" value="Click here for the time."/>

【讨论】：

我这样做了，现在我到达了“在 ajax 之前”的部分。但我永远不会到达终点。有任何想法吗？ :)
您的帖子 URL 是否有效 - 您可以浏览到“Default.aspx/GetDate”吗？除此之外，我会检查 Firebug 以查看您是否收到回复。您没有看到第二个警报的事实表明 ajax 帖子没有成功。如果删除 '$("#Result").text(msg.d);' 你会收到第二个警报吗行吗？
另外，您的代码当前将尝试更新按钮文本。您最好在页面中添加一个 div 并获取 ajax 调用来更新它。