Ajax的运用操作
一、先在登录页面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: "用户名不存在或密码错误"
})
}
})
});