js练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--写一个登录页面-->
<!--<input type="text" name="username" id="username">-->
<!--<input type="password" name="password" id="password">-->
<!--<!–点击事件–>-->
<!--<input type="button" value="登录" onclick="login()">-->
<!--<input type="button" value="登录-ID" id="i1">-->
<!--<form action="http://api.nnzhp.cn/api/user/login" method="post">-->
<input type="text" name="username" id="username" value="niuhanyang">
<input type="password" name="password" id="password" value="aA123456">
<!--点击事件-->
<input type="button" value="登录" onclick="login()" id="button">
<!--<input type="submit" value="登录-submit">-->
<!--</form>-->
<script src="jquery.js"></script>
<script>
// function login() {
// console.log('这里请求后台了');
// alert('请求后台了')
// }
// var element=document.getElementById('i1');
// element.onclick=function () {
//// console.log('这里请求后台了-e');
//// alert('请求后台了-e')
// var flag=confirm('你确认登录么？');
// console.log(flag)
// }
// function login() {
// var username=document.getElementById('username').value;
// var password=document.getElementById('password').value;
//
// console.log('username:'+username);
// console.log('password:'+password);
// 如果用户名不是admin抛出异常
// if (username=='admin' && password=='123456'){
// if (username=='admin' || password=='123456'){
// ==不验证数据类型 ===数据类型和值都验证
// if (username=='admin'){
// if (parseInt(username) == '123'){
// console.log('username是admin')
// }else if (username='user'){
// console.log('username是user')
// }else {
// console.log('username非admin')
// }
// switch (username){
// case 'admin':
// alert('admin');
// break;
// case 'user':
// alert('user');
// break;
// default:
// alert('default')
// }
// }
// function login() {
// var username = document.getElementById('username').value;
// var password = document.getElementById('password').value;
// 循环
// var tmp = ['宝马', '奔驰', '尼桑'];
// for (num in tmp) {
//// console.log(num)
// console.log(tmp[num])
// }
// map
// var tmp={'name': 'BMW', 'age': 18 };
// for (key in tmp){
//// console.log(key)
// console.log(tmp[key])
// }
// var tmp = ['宝马', '奔驰', '尼桑'];
// for (var i=0; i < tmp.length; i++) {
//// console.log(i)
// console.log(tmp[i])
// }
// while (1==1){
// break;
// }
// }
function login() {
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
// 发请求
// ajax jQuery(is dom 封装了 变得更好用的包)
// form 表单
$.ajax({
url:'http://api.nnzhp.cn/api/user/login',
method:'post',
data:{
username:username,
passwd:password
},
// success回调函数
success:function (response) {
// console.log(response)
if (response.error_code!==0){
alert(response.msg)
}else {
// 当登录成功，希望将sign userid渲染到页面上
// createElement obj
// insertxxxHTML()
// 1、获取sign userid
var sign=response.login_info.sign;
var user_id=response.login_info.userId;
// 2、创建字符串标签
var sign_span="<span>sign:"+sign+"</span>";
var user_id_span="<span>user_id:"+user_id+"</span>"
// 3、渲染到页面上
var button=document.getElementById('button');
// 获取标签的后面
button.insertAdjacentHTML('afterEnd',sign_span+user_id_span)
console.log(response)
// window.location.href='http://www.baidu.com'
}
}
})
}
</script>
</body>
</html>