Maison > Article > interface Web > Comment utiliser JavaScript pour accéder à la page de connexion

Comment utiliser JavaScript pour accéder à la page de connexion

PHPzoriginal: 2023-04-24 10:50:333992parcourir

Avec le développement d'Internet, de plus en plus de sites Web et d'applications nécessitent que les utilisateurs se connectent avant de pouvoir être utilisés. Dans ce processus, nous devons souvent utiliser JavaScript pour accéder à la page de connexion. Dans cet article, nous explorerons comment implémenter un saut de page de connexion à l'aide de JavaScript.

1. Saut normal de la page de connexion

Dans le développement de sites Web, nous avons généralement besoin que les utilisateurs se connectent avant de pouvoir accéder à la page autorisée. Pour le moment, nous devons utiliser JavaScript pour accéder à la page de connexion.

Le moyen le plus simple consiste à rédiger un formulaire de connexion sur la page frontale Une fois que l'utilisateur a saisi le nom d'utilisateur et le mot de passe, les données du formulaire sont envoyées au backend via Ajax pour vérification. Si la vérification réussit, utilisez JavaScript pour accéder à la page d'accueil.

Le code HTML est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <title>登录页面</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  </head>
  <body>
    <h1>登录页面</h1>
    <form id="login-form">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" />
      <br />
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" />
      <br />
      <input type="submit" value="登录" />
    </form>
    <script>
      $(function() {
        $("#login-form").submit(function(e) {
          e.preventDefault();
          $.ajax({
            url: "/login",
            method: "POST",
            data: $(this).serialize(),
            success: function(resp) {
              if (resp.code === 0) {
                window.location.href = "/home";
              } else {
                alert(resp.message);
              }
            },
            error: function() {
              alert("请求失败");
            }
          });
        });
      });
    </script>
  </body>
</html>

Le code JavaScript utilise la méthode Ajax dans jQuery pour envoyer les données du formulaire de connexion en arrière-plan et déterminer si la connexion a réussi en fonction de la valeur de retour de l'interface d'arrière-plan. Si la connexion réussit, utilisez window.location.href pour accéder à la page d'accueil. window.location.href 将页面跳转到主页。

二、已经登录跳回登录页面

有时候，我们需要在用户已经登录的情况下，跳转到登录页面，这时候就需要使用 JavaScript 进行已经登录跳回登录页面的操作。

假设，我们的网站有一个已经登录后才能访问的订单页面 /orders，而用户已经登录并且在订单页面上进行浏览操作。在某些情况下，用户需要退出登录，此时需要将页面跳转到登录页面，这时候就需要使用 JavaScript 进行操作了。

JavaScript 代码如下：

if (localStorage.getItem("is_login") !== "true") {
  window.location.href = "/login";
}

我们可以通过 localStorage 的方式保存用户登录状态。在用户退出登录时，将 is_login 设置为 false，在订单页面中，通过判断 is_login 是否为 true

2. Déjà connecté et revenir à la page de connexion

Parfois, nous devons accéder à la page de connexion lorsque l'utilisateur est déjà connecté. À ce stade, nous devons utiliser JavaScript pour revenir à la page de connexion. une fois que l'utilisateur s'est connecté.

Supposons que notre site Web dispose d'une page de commande /commandes qui n'est accessible qu'après s'être connecté, et que l'utilisateur s'est déjà connecté et navigue sur la page de commande. Dans certains cas, l'utilisateur doit se déconnecter et la page doit accéder à la page de connexion. Dans ce cas, JavaScript doit être utilisé.

Le code JavaScript est le suivant : 🎜rrreee🎜Nous pouvons enregistrer le statut de connexion de l'utilisateur via localStorage. Lorsque l'utilisateur se déconnecte, définissez is_login sur false. Sur la page de commande, déterminez si is_login est true >. pour décider s'il faut accéder à la page de connexion. 🎜🎜Si l'utilisateur est déjà connecté, il n'y aura pas de saut et l'utilisateur restera sur la page de commande. Si l'utilisateur n'est pas connecté, la page passera à la page de connexion. 🎜🎜3. Conclusion🎜🎜Cet article présente principalement comment utiliser JavaScript pour accéder à la page de connexion. Grâce à deux exemples de connexion normale et de retour à la page de connexion après la connexion, nous pouvons mieux maîtriser les compétences de saut JavaScript. Bien sûr, ce n'est qu'une des façons dont JavaScript implémente le saut de connexion, et nous pouvons également l'implémenter d'autres manières. J'espère que cela aide tout le monde. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery ajax html 接口 location href

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser JavaScript pour accéder aux pages HTMLArticle suivant：Comment utiliser JavaScript pour accéder aux pages HTML

Articles Liés

Voir plus