如何向服务器发送登录请求

时间:2017-04-02 21:01:01

标签: javascript jquery ajax

我是JavaScript的初学者,jQuery。

我的问题是:我有一个名为http://server.address:port/login的服务器,使用以下参数

  • 用户名
  • 密码

如果成功,则服务器发回一个json对象,如下所示:

{
"username" : "name of the user"
"token": "tokenfromserverobject"
}

我把我的html类放在下面,我想在

中编写相关的代码
<script type="text/javascript" </script> 

标记。

如上所述,如何通过Post方法发送登录并从服务器响应中获取?

&#13;
&#13;
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
    <meta name="author" content="Anonymous">
    <link href="bootstrap.css" rel="stylesheet">
    <link href="bootstrap-grid.css" rel="stylesheet">
    <link href="bootstrap-reboot.css" rel="stylesheet" >
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5"/css/bootstrap.min.css>
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-reboot.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="bootstrap-reboot.min.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

    </script>


</head>
<body background="login-background.jpg">
<div class="container">
    <div class="card card-container">
        <img id="profile-img" class="profile-img-card" src="user.png" />
        <p id="profile-name" class="profile-name-card"></p>
        <form class="form-signin">
            <span id="reauth-email" class="reauth-email"></span>
            <input type="text" id="inputEmail" class="form-control" placeholder="Username" required autofocus>
            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
            <div id="remember" class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" id="sendauth">Sign in</button>
        </form><!-- /form -->
        <a href="#" class="forgot-password">
            Forgot the password?
        </a>
        <hr>
        <img src="unnamed.png">
        <ul id="ulResponses"/>
    </div><!-- /card-container -->
</div><!-- /container -->

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

尝试使用ajax:

$.ajax({
    type: 'POST',
    url: 'http://server.address:port/login',
    data: { 
        'Username': 'yourUserName', 
        'Password': 'yourPass' 
    },
    success: function(msg){
        alert(msg);
    }
});