Asp.net 返回整个页面

Question

我一直在尝试开发一个具有登录系统的网站。 作为其中的一部分，我想对服务器进行 AJAX 调用，以使用用户名和密码处理登录系统。 当我拨打电话时，一切顺利，但我收到了整个网页的回报，我不知道为什么

Ajax调用（JS）：

function AJAXfunc(username, password) {
    var parameter = JSON.stringify({ "username": username, "password": password })
    $.ajax({
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        url: '/Login?handler=LoginFunc',
        data: parameter,
        dataType: 'json',
        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },

        success: function (data) {
            onsuccess(data)
        },
        error: function (data, success, error) {
            alert("Error: " + error + " - " + data + " - " + success + " - " + data.value)
        }
    })
}

服务器端代码（C#）：

public class LoginModel : PageModel
    {
        public async Task<IActionResult> OnPostLoginFuncAsync(HttpContext http, JsonDocument json)
        {
            return new JsonResult("success");
        }
        
    }

任何帮助将不胜感激 谢谢

编辑：这是调用ajax函数的代码

function onLoginLoad() {
    const formLogin = document.getElementById("login");
    

    formLogin.addEventListener("submit", function (event) {
        const userName = formLogin.getElementsByClassName("username")[0].value;
        const password = formLogin.getElementsByClassName("password")[0].value;
        // stop form submission
        event.preventDefault();

        AJAXfunc(userName,password);
    });
}

这是 HTML 代码

<form id = "login"  action = "/LoginFunc" method = "post">
                    <h1>Login</h1>
                    <small></small>
                    <div class = "field">
                    <label for = "username" class="loginpg" style="top:45%;left:45%;position:fixed;color:white; width:10%;">Username</label>
                    <input type="text" class="username" name="username" id="username" style="top:48%;left:45%;position:fixed;width:10%;" placeholder = "Username"><br><br>
                    </div>
                    <div class = "field">
                    <label for = "password" class="loginpg"  style="top:51%;left:45%;position:fixed;color:white;width:10%;">Password</label>
                    <input type= "password" class="password" id="password" name="password"style="top:54%;left:45%;position:fixed;width:10%;" placeholder = "Password"><br><br>
                    </div>
                    <input type="submit" value="Submit" class = "loginpg" style="top:57%;left:45%;position:fixed;width:10%;">
</form>

这就是确切的错误：“意外的令牌”<', "\r\n\r\n

是的，一般来说，如果你的客户端 JS 代码是一大堆乱七八糟的东西？

然后点击网页往往会窒息，简单地返回整个页面。当这种情况发生时，就意味着你的代码全错了。

当您构建/进行 AJAX 调用时，您可以在 URL 中传递值。这就是我们所说的 REST 调用。

但是，在大多数情况下，我们都“非常不喜欢”使用那些凌乱的 URL 参数，因此当我们使用 .ajax 调用时，我们更喜欢使用 jQuery .ajax 调用的 .data 选项。

您的代码看起来两者都有 - 但这是行不通的。

接下来：

请记住，这些 .ajax 调用不是回发，这意味着在该页面类的代码隐藏中，此类代码不使用页面类的“实例”（例如，该代码无法查看/使用/享受/更改页面上的控件）。

页面类的“方法”必须是静态的 - 因为不会存在页面类的“实例”（因为没有页面回发）。

转储 URL 中的参数 - 使用其中之一（数据或基于 URL 的参数）。

接下来，如果您不使用页面方法创建单独的 asmx 页面，那么您是否选择将 Web 方法放置在现有页面中？ （我很喜欢这个选择，因为这样代码和 Web 方法就在同一个地方了？

然后该 Web 方法必须标记为 Web 方法，并且还必须是该页面的静态成员。

因此，您的代码将/应该如下所示：

那么，说一下客户端标记和 JS 代码：

    <h3>Enter user</h3>
    <asp:TextBox ID="txtUser" runat="server" ClientIDMode="Static">
    </asp:TextBox>

    <h3>Enter password</h3>
    <asp:TextBox ID="txtPass" runat="server" ClientIDMode="Static">
    </asp:TextBox>

    <br />
    <asp:Button ID="cmdLogIn" runat="server" Text="Login"
        OnClientClick="mylogin();return false;"                
        />

    <script>

        function mylogin() {

            sUser = $('#txtUser').val()
            sPass = $('#txtPass').val()
            AJAXfunc(sUser,sPass)


        }

function AJAXfunc(username, password) {

    var parameter = JSON.stringify({ "username": username, "password": password })
    $.ajax({
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        url: 'WebCalltest.aspx/LoginFunc',
        data: parameter,
        dataType: 'json',

        success: function (mydatastuff) {
            alert('return value = ' + mydatastuff.d)
            // onsuccess(mydatastuff.d)
        },
        error: function (data, success, error) {
            alert("Error: " + error + " - " + data + " - " + success + " - " + data.value)
        }
    })
}
    </script>

后面的代码（假设同一页面），那么是这样的：

[WebMethod]
public static string LoginFunc(string username, string password) 
{
    // do whatever

    return "this is the string return result";
}

所以，现在当我们在上面运行时，我们得到/看到这个：

因此，上面是关于其工作原理的“基本”布局和“模式”。

在上面的示例中，页面中的 Web 方法位于/放置在同一页面中 - 因此我在上面使用了 URL 更改。当然，您必须将 URL 更改为当前页面。请注意，页面 URL 是相对于您当前页面的 - “/”在 JS 代码中并不意味着 root。

还要注意close，返回值是一个.d属性。这是 .net 的一个怪癖，因此您不使用 data，而是使用 data.d，或者在我的示例中使用 mydatastuff.d

因此，不要忘记/省略 .d 以从该 Web 方法获取返回结果。

Answer 1