Verwenden Sie node.js + jQuery, um die Benutzeranmeldungsregistrierung zu implementieren (AJAX-Interaktion).

In diesem Artikel werden hauptsächlich die relevanten Kenntnisse über die Verwendung von Node.js als Backend und jQuery zum Schreiben des Front-End-AJAX-Codes zur Implementierung von Benutzeranmelde- und Registrierungsfunktionen vorgestellt. Hat einen sehr guten Referenzwert. Werfen wir einen Blick mit dem Editor unten

Vor kurzem wurde Node.js als Backend implementiert, und jQuery schreibt den Front-End-AJAX-Code, um die Benutzeranmelde- und Registrierungsfunktionen zu realisieren, wodurch die drei Frontansichten aktualisiert werden -End- und Back-End-Interaktion. Notieren Sie sich dies besonders.

1.login.ejs implementiert das Formular-Framework

  <form >
      <ul>
        <li><p>用户名</p></li>
        <li><input type="text" name="username" id="username"></li>
      </ul>
      <ul>
        <li><p>密码</p></li>
        <li><input type="password" name="password" id="password"></li>
      </ul>
      <ul class="mt50">
        <li><input id="login_submit" class="submit" type="button" value="登 陆"></li>
      </ul>
    </form>

Form fügt keine Methode hinzu, beabsichtigt Verwenden Sie Ajax allein. Senden Sie eine Anfrage.

2.js implementiert das Senden von Anfragen

$("#login_submit").click(function(){
  var username=$('#username').val();
  var password=$('#password').val();
  //这里实现对 username和password格式的判断
  //........
  //发送ajax请求 使用post方式发送json字符串给后台login
  $.ajax({
    type: "post",
    url: "http://localhost:3000/login",
    dataType: "json",
    data:{ username: username, password: password },
    success: function(data){
    //接受返回的数据，前端判断采取的动作
      if(data){
        if(data.message=="false"){
          alert('密码错误，请重新输入');
          window.location.href="login";
        }else{
          alert('登陆成功');
          window.location.href="index";
        }
      } else{
      }
    }
  });
});

2 🎜>

/**
 * 注册页 post 
 */
router.post('/reg', function (req, res, next) {
  //先查询有没有这个user
  console.log("req.body"+req.body);
  user2.findDocuments(DATABASE, "users", 1, {"uName":req.body.username}, function (user) {
    res.setHeader('Content-Type', 'application/json;charset=utf-8');
    if(user.length==0){
      //用户名没有重复 同意创建用户
      user2.insertDocuments(DATABASE, "users",
        [{
          "uName":req.body.username,
          "uPasswd":req.body.password,
          "uEmail":req.body.email,
          "uHasshop":0,
          "uShopname":"null",
          "aId":'-1'

        }],
        function (result){
          res.send({status:"success", message:"true"});
        }
      );
    }
    else{
      // 用户名重复。找到这个user 不同意创建用户
      res.send({status:"success", message:"false"});
    }
  });
});

Die Registrierungsseite ähnelt der Anmeldeseite. Keine weiteren Details.

Kurz gesagt, ich hatte immer das Gefühl, dass die Seite, auf die ich über meinen Browser zugegriffen habe, eine Frontend-Sache war. Das Backend ist ein körperloser Haufen Code. Jetzt verstehe ich, dass alle besuchten URLs zum Backend gehören. Welche Inhalte vom Backend gesendet werden, wird vom Browser angezeigt. Die Front-End-Anzeige ist nur für einen Moment verfügbar und die Back-End-Ressourcen sind dauerhaft.

Das obige ist der detaillierte Inhalt vonVerwenden Sie node.js + jQuery, um die Benutzeranmeldungsregistrierung zu implementieren (AJAX-Interaktion).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!