node.js+jQuery를 사용하여 사용자 로그인 등록(AJAX 상호작용) 실현

이 기사에서는 Node.js를 백엔드로 사용하고 jQuery를 사용하여 사용자 로그인 및 등록 기능을 구현하는 프런트엔드 AJAX 코드를 작성하는 방법에 대한 관련 지식을 주로 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터로 살펴보자

최근 백엔드로 Node.js가 구현되었고 jQuery는 프론트엔드 AJAX 코드를 작성하여 사용자 로그인 및 등록 기능을 구현하여 프론트의 세 가지 뷰를 새로 고칩니다. -엔드 및 백엔드 상호 작용. 이 점을 특별히 기록해 두십시오.

1.login.ejs는 양식 프레임워크를 구현합니다

  <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>

양식은 메소드를 추가하지 않으며 Ajax를 사용하려고 합니다. 자체적으로 요청을 보냅니다.

2.js 요청 전송 구현

$("#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{
      }
    }
  });
});

백그라운드 수신

/**
 * 注册页 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"});
    }
  });
});

등록 페이지는 로그인 페이지와 유사합니다. 자세한 내용은 없습니다.

한마디로 브라우저를 통해 접속한 페이지가 프론트엔드라는 느낌을 늘 느꼈습니다. 백엔드는 구체화되지 않은 코드 묶음입니다. 이제 방문한 모든 URL이 백엔드에 속한다는 것을 이해합니다. 백엔드에서 전송한 콘텐츠가 브라우저에 표시됩니다. 프런트엔드 디스플레이는 일시적일 뿐이며 백엔드 리소스는 영구적입니다.

위 내용은 node.js+jQuery를 사용하여 사용자 로그인 등록(AJAX 상호작용) 실현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!