用web方法的AJAX登录界面？

Question

我对此很陌生，并且很难将我的大脑包裹在通过对Web方法的AJAX调用应该返回的内容以及我应该如何处理它。我正在尝试创建一个简单的登录屏幕。

这就是我所拥有的：

HTML：

            <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true"></asp:ScriptManager>

            <input type="text" placeholder="username" id="username" />
            <input type="password" placeholder="password" id="password" />
            <button id="loginbutton" onclick="UserLogin()" type="submit">login</button>

JavaScript的：

 function UserLogin() {

        var postData = JSON.stringify({
            "username": $("#username").val(),
            "password": $("#password").val()
        });
        alert(postData);
        $.ajax({
            type: "POST",
            url: "login.aspx/AuthenticateUser",
            data: postData,
            contentType: "application/json; charset=utf-8",
            success: callbackfunction,
            error: function (msg) { alert(msg); }
        });


    }

    function callbackfunction(result) {
        alert('callback');
        if (result.d) {
            alert('success');
        }
    }

网络方法：

     <WebMethod()>
Public Shared Function AuthenticateUser(sID As String, sPassword As String) As Boolean


    Dim db As New ProjectDatabase
    Dim ed As New EncryptDecrypt

    Dim sSQL As String = "SELECT [USER_ID] FROM [USERS] WHERE [USER_ID] = '" & sID & "' AND [PASSWORD] = '" & ed.Encrypt(sPassword) & "'"

    'will return the result of the query, either a user id or nothing
    Dim sRtn As String = db.GetSQLData(sSQL, db._cnnSQL)

    If sRtn = "" Then
        Return False
    Else
        Return True
    End If

End Function

因此，如果我理解正确，我应该能够从Web方法返回true或false，但由于某种原因我没有进入那里（没有打破断点）并且AJAX的两端应该抛出一个消息框。然而，这也不会发生。

我知道这个问题已被提出，我已经阅读了多篇文章，但似乎仍然无法做到正确。

谢谢你的建议。

Answer 1

你的登录按钮有type="submit"，这将使它启动一个完整的回发，所以几乎可以肯定ajax请求永远不会发生由于这种行为。

将其更改为type="button"

Answer 2

试试这个 -

HTML -

 <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePageMethods="true"></asp:ScriptManager>

        <input type="text" placeholder="username" id="username" />
        <input type="password" placeholder="password" id="password" />
        <button id="loginbutton" onclick="UserLogin()" type="submit">login</button>

JAVASCRIPT -

function UserLogin() {

    var postData = JSON.stringify({
        "username": $("#username").val(),
        "password": $("#password").val()
    });
    alert(postData);
    $.ajax({
        type: "POST",
        url: "login.aspx/AuthenticateUser",
        data: "{'data': '" + postData+ "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: callbackfunction(result),
        error: function (msg) { debugger;alert(msg); }
    });


}

function callbackfunction(result) {
    debugger;
    alert('callback');
    if (result.d) {
        alert('success');
    }
}

网络方法 -

using NewtonSoft.Json;

<WebMethod()>
Public Shared Function AuthenticateUser(data As String) As Boolean


Dim db As New ProjectDatabase
Dim ed As New EncryptDecrypt
Dim dt As New Datatable =  JsonConvert.DeserializeObject<DataTable>(data);

Dim sSQL As String = "SELECT [USER_ID] FROM [USERS] WHERE [USER_ID] = '" & dt.Rows(0).Item("username") & "' AND [PASSWORD] = '" & ed.Encrypt(dt.Rows(0).Item("password")) & "'"

'will return the result of the query, either a user id or nothing
Dim sRtn As String = db.GetSQLData(sSQL, db._cnnSQL)

If sRtn = "" Then
    Return False
Else
    Return True
End If

End Function

这将获取数据并让您在浏览器上进行调试