logo标签列表

使用ASP.NET的jQuery与Ajax

asp.netjquery
3

我第一次在asp.net中使用ajax。因此，我正在尝试学习一些Jquery知识。我创建了一个包含按钮的aspx文件，当点击该按钮时，它将写下当前日期。但是，当我点击按钮时，什么也不会发生。使用firebug可以看到Jscripts正在运行，但它们不会触发我的警报。有什么想法吗？

以下是代码。

这是我的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/

这是可工作的版本：

Javascript代码：

$(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响应显示了什么？ - Curtis
1
请仔细检查包含静态GetDate方法的文件名称，它是Default.aspx还是Index.aspx？ - Waqas
你应该从问题中删除解决方案，并将其作为答案添加。 - murgatroid99
3个回答
3
代码无法工作是因为存在小错误。
修复这些错误，你就会没问题了。
  1. 你正在从 public partial class index : Page 调用页面方法，而理想情况下应该从 Default: Page 调用。
  2. 你正在使用提交按钮，所以你应该使用 evt.preventDefault();
  3. 你正在更改按钮的值，所以应该使用 .val() 而不是 .text
  4. 最后，通过新的 Encosia 文章节省一些输入时间。
示例代码
$(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);
            }
        });

    });

});

快乐编程！

1
在你所提到的文章中，作者使用 div 触发 Ajax 调用 -
 <div id="Result">Click here for the time.</div>

你正在使用一个提交按钮，我认为postback可能会破坏你的Ajax请求，请尝试将按钮声明更改为以下内容 - 

<input id="Result" type="button" value="Click here for the time."/>
我已经做到了这一步，现在正在接近“ajax之前”的部分。但是我从来没有到达过终点。有什么想法？ :) - Peter Rasmussen
你的帖子URL是否有效 - 你能浏览到“Default.aspx/GetDate”吗？除此之外，我会检查Firebug，看看是否有响应返回。你没有看到第二个警报的事实表明ajax post没有成功。如果删除“$（“#Result”）.text（msg.d）;”这一行，您是否会收到第二个警报？ - ipr101
1
此外，您的代码目前会尝试更新按钮文本。最好添加一个 div 到页面上，并让 ajax 调用来更新它。 - ipr101
1

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

此外，您的WebMethod实际上并没有返回JSON。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接