javascript 使用 ASP.Net 和 Ajax 的登录页面

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9998314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 08:26:53  来源:igfitidea点击:

Login Page using ASP.Net & Ajax

javascriptasp.nethtmlajaxlogin

提问by OnlyHope

I'm trying to make a login page using html, ajax & ASP.NET.The data is truly passed to the ajax function, but when I debug the asp page the username and password are sent with NULL. The code is supposed to take username & password then returns the userid

我正在尝试使用 html、ajax 和 ASP.NET 制作登录页面。数据确实传递给了 ajax 函数,但是当我调试 asp 页面时,用户名和密码以 NULL 发送。该代码应该采用用户名和密码,然后返回用户 ID

Html page:

html页面:

    <div id="usernameid">Username:</div><input id="username" type="text"/> <span id="username_status"></span>
    <div id="passwordid">Password:</div><input id="password" type="password"/> <span id="password_status"></span>
    <div> <input id="loginbutton" onclick="UserLogin()" type="submit" value="Submit" /></div>

Javascript:

Javascript:

function UserLogin() {
var postData = JSON.stringify({ "username": JSON.stringify($("#username").val()), "password": JSON.stringify($("#password").val()) });
alert(postData);
$.ajax({
    type: "GET",

    url: "http://localhost:49317/LoginPageForLearn.aspx",
    data: postData,
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp",
    jsonp: 'jsoncallback',
    success: callbackfunction,
    error: function (msg) { alert(msg); }
    }); 
    }
    function callbackfunction(datacoming) {
    localStorage["UserID"] = datacoming;
    alert(datacoming);

Asp.net page:

Asp.net 页面:

protected void Page_Load(object sender, EventArgs e)
    {

        string userName = "";
        int userId = -1;
        string PassWord = "";
        if (Request.QueryString.Count != 0 && Request.QueryString["username"] != string.Empty && Request.QueryString["password"] != string.Empty)
            {
                userName = Request.QueryString["username"];
                PassWord = Request.QueryString["password"];
                userId = GetUserID(userName, PassWord);

            }
    }

Do you have any ideas why isn't the data passed correctly ? Or do you have any other ideas on how can I make a login page using html and access the data at SQL.

您知道为什么数据不能正确传递吗?或者您对如何使用 html 制作登录页面并在 SQL 中访问数据有任何其他想法。

Thanks a lot.

非常感谢。

回答by Darin Dimitrov

You could create a PageMethod:

您可以创建一个 PageMethod:

[WebMethod]
public static bool MyMethod(string username, string password)
{
    ...
    return true;
}

and then get rid of the double JSON stringification and call the page method:

然后摆脱双重JSON字符串化并调用页面方法:

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

and in your callback you could test the result of the page method:

在您的回调中,您可以测试页面方法的结果:

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

回答by Dennis Rongo

It doesn't work that way. You have to also return something in order to notify the client that the authentication succeeded or failed. You have to think about the programmatic work flow.

它不会那样工作。您还必须返回一些内容以通知客户端身份验证成功或失败。您必须考虑程序化工作流程。

You can create a static method in the page that you're calling that returns a value in form of Bool or JSON. Something along these lines:

您可以在您调用的页面中创建一个静态方法,该方法以 Bool 或 JSON 的形式返回值。沿着这些路线的东西:

[WebMethod] 
[ScriptMethod(UseHttpGet = true)]
public static bool Authenticate JsonMethod(int username, string password)
{ 
   bool isAuthenticated = // some method to authenticate
   return isAuthenticated;
}

Your AJAX would look something like this:

你的 AJAX 看起来像这样:

$.ajax({
    type: "GET",
    url: "http://localhost:49317/LoginPageForLearn.aspx/Authenticate",
    data: postData,
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp"
}); 

In your success or failure call back, you'll assess from there on what you want to do with the returned value.

在您的成功或失败回调中,您将从那里评估您想对返回的值做什么。

In any case, a handler would probably be better since it doesn't contain unnecessary mark up.

无论如何,处理程序可能会更好,因为它不包含不必要的标记。