ASP.NET jQuery Ajax 调用代码隐藏方法答案

【问题标题】：ASP.NET jQuery Ajax Calling Code-Behind MethodASP.NET jQuery Ajax 调用代码隐藏方法
【发布时间】：2013-08-16 16:40:41
【问题描述】：

我对 Web 开发非常陌生，但总体上拥有丰富的开发经验。我有一个 ASP 页面，它有几个输入字段和一个提交按钮。这个提交按钮纯粹调用 $.ajax，我打算在代码隐藏文件中调用一个方法。然而，我注意到了两件有趣的事情。首先，无论向它提供什么数据，ajax 调用都会成功。其次，responseText字段是整个页面的html源代码。

我已阅读 this 和其他指向 webconfig 的文章，但这些解决方案似乎无法解决我的问题。

这里是asp页面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="TesScript.js"></script>
    <link rel="Stylesheet" type="text/css" href="TestStyle.css" />
</head>
<body>
    <div>
        <ul class="tempList">
            <li>Name:
                <input id="nameText" type="text" />
            </li>
            <li>Attending:
                <input id="yesButton" type="radio" name="attending" />
                Yes
                <input id="noButton" type="radio" name="attending" />
                No </li>
            <li>Return Address:
                <input id="returnAddressText" type="text" />
            </li>
            <li>
                <input id="submitButton" type="button" onclick="submit()" value="Submit" />
            </li>
        </ul>
    </div>
    <ul id="errorContainer" class="errorSection" runat="server" />
    <ul id="messageContainer" class="messageSection" runat="server" />
</body>
</html>

背后的代码：

using System;
using System.Web.Services;
using System.Web.UI;

namespace TestAspStuff
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }


        [WebMethod]
        public static string OnSubmit(string name, bool isGoing, string returnAddress)
        {
            return "it worked";
        }
    }
}

还有 JavaScript：

function submit() {

    var name = "my name";
    var isAttending = true;
    var returnAddress = "myEmail@gmail.com";

    SendMail(name, isAttending, returnAddress);
}

function SendMail(person, isAttending, returnEmail) {

    var dataValue = { "name": person, "isGoing": isAttending, "returnAddress": returnEmail };

    $.ajax({
        type: "POST",
        url: "Default.aspx/OnSubmit",
        data: dataValue,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        },
        complete: function (jqXHR, status) {
            alert("complete: " + status + "\n\nResponse: " + jqXHR.responseText);
        }
    });

}

现在，我注意到我可以将 url 属性更改为我想要的任何内容，并且永远不会调用 error 方法，并且状态为成功，responseText 是整个 html 页面。我的 webconfig 包含所有适当的部分（包括 htmlModule 部分）。我在.Net 3.5 中工作。我很感激任何帮助，而且，我对此真的很陌生，所以对其他人来说显而易见的东西对我来说很可能并不明显。如果有更好的方法来做到这一点（即从 JavaScript 调用 asp.net 代码隐藏方法），请随时发布。谢谢！！！

【问题讨论】：

既然您要求更好的方法，IMO 您应该使用 Mvc、Web API 或 Web 服务来获取 json 响应。虽然您可以使用 aspx 页面来执行此操作，但这是一个 hacky 解决方案。 aspx 页面是为渲染网页而设计的！
创建一个 Web 服务可能是其中最简单的......这种事情就是他们的目的。
谢谢你们。我已经对此进行了一些研究，当我在这里获得更好的理解时可能会尝试这样做。我也想知道它在这个级别上是如何工作的。谢谢！

标签： c# javascript jquery asp.net ajax

【解决方案1】：

首先，您可能想要添加一个 return false；到 JavaScript 中 Submit() 方法的底部（因此它会停止提交，因为您是在 AJAX 中处理它）。

您正在连接到 complete 事件，而不是 success 事件 - 存在显着差异，这就是您的调试结果不符合预期的原因。另外，我从来没有让签名方法与你的匹配，而且我总是提供 contentType 和 dataType。例如：

$.ajax({
        type: "POST",
        url: "Default.aspx/OnSubmit",
        data: dataValue,                
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        },
        success: function (result) {
            alert("We returned: " + result);
        }
    });

【讨论】：

谢谢。尽管提供了更多细节，但这并没有解决问题。不包括 contentType 和 dataType 字段，执行成功方法，结果是整个 HTML 页面。添加这两个字段，错误事件引发内部服务器错误。另外，你说“我从来没有让签名方法与你的匹配”是什么意思？
已修复！传递的数据与预期的参数类型不匹配。

【解决方案2】：

这也没有解决我的问题，所以我稍微更改了参数。
这段代码对我有用：

var dataValue = "{ name: 'person', isGoing: 'true', returnAddress: 'returnEmail' }";

$.ajax({
    type: "POST",
    url: "Default.aspx/OnSubmit",
    data: dataValue,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
    },
    success: function (result) {
        alert("We returned: " + result.d);
    }
});

【讨论】：

据我所知，您刚刚更改了dataValue 并添加了contentType 和dataType？你能以这种方式在方法中使用传递的变量吗？

【解决方案3】：

我知道这是一个旧线程。一种可能的解决方案是使用 JSON.stringify( ) 将其转换为正确的 JSON 字符串。这将解决任何与数据参数值相关的问题。

function SendMail(person, isAttending, returnEmail) {

    var dataValue = { "name": person, "isGoing": isAttending, "returnAddress": returnEmail };

    $.ajax({
        type: "POST",
        url: "Default.aspx/OnSubmit",
        data: JSON.stringify(dataValue),
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        },
        complete: function (jqXHR, status) {
            alert("complete: " + status + "\n\nResponse: " + jqXHR.responseText);
        }
    });

}

【讨论】：