Ajax的运用操作

Author Avatar
七星泪脉 Aug 10, 2016
一、先在登录页面js文件上写上Ajax的通用封装函数

1、Ajax的通用封装函数

function AJax(type,url,parm,callback){
  if(type === "GET"){
var xhr = new XMLHttpRequest();
xhr.open(type,url);
xhr.send();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
//doSometing
var data = xhr.responseText;

callback(data);
      }
}
  }else{
   var xhr = new XMLHttpRequest();
xhr.open(type,url);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");


xhr.send(parm);
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
//doSometing
var data = xhr.responseText;

callback(data);
              }
        }
      }
}

2、在通过js获取到form表单内部的元素

var btn = document.querySelector("#login .submit");//登录按钮
var login_user = document.querySelector("#login .deng_zh input");// 账号输入框
var login_pass = document.querySelector("#login .deng_mm input");// 密码输入框    

3、套用Ajax来写鼠标点击后触发的效果界面

btn.onclick=function () {
  var user = login_user.value;
  var pass = login_pass.value;
   var data = `username=${user}&password=${pass}`
  AJax('post','/login',data,function (date) {
console.log(data);
var date = JSON.parse(date)
console.log(date);
if(date.success == '0'){
  alert(date.info)
  location.reload()
}else{
  location.href = '/';
     }
  })
}

4、下面是关于node.js基础上,和Express框架上,通过mongodb服务端来把数据给导入到客户端上,实现一个服务端响应多个客户

   可在index.js文件上引入mongoose
   在引入之前写在终端上下载 $ npm install mongoose --save
   var mongoose = require("mongoose");
var db = mongoose.connect("mongodb://127.0.0.1/jyb");
再将其模板写出:
var userSchema = new mongoose.Schema({
  user: String,
  pass: String,
  user_name: String,
});
var userModel = db.model("users",userSchema,"users");

可通过post的方法:
router.post('/login', function(req, res, next){
  var user= req.body.username;
  var pass = req.body.password;
  userModel.findOne({user: user,pass: pass},function (err,result) {
if (result){
req.session.user = user;
return res.send({
  success:'1',
  info: "登陆成功"
})
  }else{
return res.send({
  success:'0',
  info: "用户名不存在或密码错误"
})
  }
  })
});