Fatal编程技术网
  • csharp/
  • C# ASP.NET jQuery Ajax调用代码隐藏方法

C# ASP.NET jQuery Ajax调用代码隐藏方法

c# javascript jquery asp.net ajax

C# ASP.NET jQuery Ajax调用代码隐藏方法,c#,javascript,jquery,asp.net,ajax,C#,Javascript,Jquery,Asp.net,Ajax,我对web开发非常陌生，但总体上有很多开发经验。我有一个ASP页面，有几个输入字段和一个提交按钮。这个提交按钮纯粹调用$.ajax，我打算让它调用代码隐藏文件中的一个方法。然而，我注意到两件有趣的事情。首先，无论向ajax调用提供了什么数据，ajax调用都会成功。其次，responseText字段是整个页面的html源代码 我读过一些关于webconfig的文章和其他文章，但这些解决方案似乎并不能解决我的问题 以下是asp页面： <html xmlns="http://www.w3.org

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

我读过一些关于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>
还有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方法，状态为success，responseText是整个html页面。我的webconfig有所有适当的部分（包括htmlModule部分）。我在.NET3.5工作。我很感激任何帮助，再说一次，我真的是个新手，所以对别人来说显而易见的东西对我来说很可能并不明显。如果有更好的方法（从JavaScript调用asp.net代码隐藏方法），请随时发布。谢谢

首先，您可能需要添加一个返回false；位于JavaScript中Submit（）方法的底部（因此它会停止提交，因为您在AJAX中处理它）

您正在连接到完整事件，而不是成功事件-这是一个显著的差异，这就是调试结果不符合预期的原因。此外，我从未使签名方法与您的匹配，而且我始终提供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);
        }
    });
这也没有解决我的问题，所以我稍微更改了参数。
这个代码对我有用：

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);
    }
});
我知道这是一根旧线。一种可能的解决方案是使用
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);
        }
    });

}
既然您要求更好的方法，我想您应该使用Mvc、Web API或Web服务来获得json响应。虽然您可以使用aspx页面来实现这一点，但这是一个不成熟的解决方案。aspx页面是为呈现网页而设计的！创建一个web服务可能是其中最简单的一个…这种事情就是它们的目的。谢谢你们。我已经对此进行了一些研究，当我在这里有了更好的理解时，我可能会尝试一下。我也想知道它在这个级别上是如何工作的。谢谢非常感谢。这并没有解决问题，尽管它提供了更多细节。不包括contentType和dataType字段，执行success方法，结果是整个HTML页面。添加这两个字段后，将引发错误事件，并出现内部服务器错误。还有，你说“我从来没有让签名方法与你的匹配”是什么意思？修正了！传递的数据在类型上与它期望的参数不匹配。据我所知，您刚刚更改了
数据值
，并添加了
内容类型
和
数据类型
？您能以这种方式在方法中使用传递的变量吗？ 
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);
        }
    });

}