标签：function 登录 url 表单 json let promise js data
//引入的路径是一个本地服务器的路径,引用的时候自己手动修改,样式没有写,自己去写 //注册页面的js分为三个js //第一个是请求数据的ajax.js let $ = {//做公共的数据请求 baseUrl:"http://localhost:9999/", ajax(json) {//用来请求数据 接收的一个对象 let xhr = new XMLHttpRequest(); let url =this.baseUrl+json.url;// if(json.type.toLowerCase() == "get"&&json.data){//get请求有data url +="?"; for(let key in json.data){ url += key+"="+json.data[key]+"&" } } xhr.open(json.type,url);//url分get post put(根据id) delete(根据id) xhr.onreadystatechange = function () { if (xhr.readyState == 4) { try{//错误捕获 let res = xhr.responseText; if (json.dataType == "json") { res = JSON.parse(res); } json.success(res);}catch(e){ if(json.error){//错误回调 json.error(e); } } } else {//加载数据完成前的处理 if (json.before) { json.before(); } } } if (json.type.toLowerCase() != "get") { xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); } if (json.data&&json.type.toLowerCase() != "get") {//data={username:"leson",userpwd:123}不要变成username=leson&userpwd=123& let str = "" for (let key in json.data) { str += key + "=" + json.data[key] + "&"; // str += `${key} = ` } xhr.send(str); } else { xhr.send(); } } //第二个是公共的样式部分的js主要功能是增删改查,方法是promise import $ from "./ajax.js";
let get =function(url,data){
let p = new Promise(function(resolve,reject){ $.ajax({ type:"get", url, dataType:"json", data, success:function(list){ resolve(list); }, error:function(e){ reject(e); } })
})
return p;
} let post = function(url,data){
return new Promise(function(resolve,reject){ $.ajax({ type:"post", url, dataType:"json", data, success:function(res){ resolve(res); } }) })
} let del = function(url,cb){ $.ajax({ type:"delete", url, dataType:"json", success:function(){ cb(); } }) } let put = function(url,data,cb){ $.ajax({ type:"put", url, dataType:"json", data, success:function(res){ cb(res); } }) }
export { get,post,del,put } //第三个是注册页面用户引入的js import {get,post} from "../index.js";
export default { tableName:"userinfos", query:function(data){//你给我数据 我给你结果 return get(this.tableName,data) },
add:function(data){ return post(this.tableName,data) } } //第四个是用户注册的页面的js文件 import userModel from "./index.js"; let usernameInput = document.getElementById("username"); let userpwdInput = document.getElementById("userpwd"); let registerBtn = document.getElementById("register");
registerBtn.onclick = async function () { let username = usernameInput.value; let userpwd = userpwdInput.value; let list = await userModel.query({ username });
if (list.length) {
alert("该用户名已经存在")
} else { let info = await userModel.add({ username, userpwd });
alert("新增成功"); console.log(info); location.href = "../lesson03 afternoon/login.html"; }
} //第五个是登录页面的js文件 import userModel from "./index.js";
let usernameInput = document.getElementById("username"); let userpwdInput = document.getElementById("userpwd");
let loginBtn = document.getElementById("login");
loginBtn.onclick=function(){ //获取用户名和密码 //进行验证
let username = usernameInput.value; let userpwd = userpwdInput.value;
userModel.query({username,userpwd}).then(function(list){ // console.log(list);
if(list.length){//boolean转换 0为false // alert("登录成功"); let userinfo = list[0];//
window.localStorage.setItem("userinfo",JSON.stringify(userinfo));//把用户信息 以字符串的形式存起来 window.location.href ="list.html";
}else{ alert("用户名和密码不匹配"); } })
} //下面分别是注册和登陆的页面的显示仅仅只是引入两行js代码就搞定了 //注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div>用户名<input id="username"/></div> <div>密码<input id="userpwd"/></div> <div> <button id="register">注册</button> </div> </div> </body> <script src="js/userinfo/register.js" type="module"></script> //登陆页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div>用户名<input id="username"/></div> <div>密码<input id="userpwd"/></div> <div> <button id="login">登录</button> </div> </div> </body> <script src="js/userinfo/login.js" type="module"></script> </html> } export default $;
标签：function,登录,url,表单,json,let,promise,js,data 来源： https://www.cnblogs.com/czb1218/p/14711594.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。