html+css+javascript常用实例之用户信息接口

12345，catch a tiger

已于 2023-03-14 21:59:50 修改

阅读量147

点赞数

文章标签： javascript html css

于 2023-03-07 12:20:53 首次发布

本文链接：https://blog.csdn.net/qq_29848853/article/details/129379959

版权

一，用户UI显示和接口获取用户信息

htm代码

<div class="div_header_layout">
   <div class="div_header"></div>
   <div class="div_name">
       <p id="username">张三</p>
       <p>锄禾日当午，汗滴禾下土</p>
   </div>
</div>

/**
 * display: flex;弹性盒子用作子view水平布局
 */
.div_content .div_header_layout {
	padding: 0.6rem;
	display: flex;
}

/**
 * flex-shrink 属性定义了项目的缩小比例，默认为1
 * 即如果空间不足，该项目将缩小，它还有另外一个值，就是0
 * 如果在子元素的 css 样式中添加 flex-shrink 属性， 然后把值改为 0
 * flex-shrink：0 ，那么当前元素就不会被其他子元素挤压
 */
.div_content .div_header_layout .div_header {
	width: 4rem;
	height: 4rem;
	background: url("../images/test2.jpg") no-repeat center center #ffffff;
	border-radius: 4rem;
	flex-shrink: 0;
}

/**
 * margin: auto 0; 
 * 程序会自动计算剩余上下两部分的空白长度，把其等分再作为div左右的外边距，使得div垂直居中。
 */
.div_content .div_header_layout .div_name {
	margin: auto 0;
	margin-left: 0.6rem;
}

const HTTP = "http://";// 协议
// const HOST = "localhost"; //本地域名
const HOST = "tang.dongfangdashu.top"; //远程域名
const BASEURL  = HTTP+HOST+"/api/"; //根路径



/**
 * @param {Object} obj
 * @param {Object} successfun
 * @param {Object} errFun
 * XMLHttpRequest请求封装
 */
function httpRequest(obj, successfun, errFun) {
    var xmlHttp = null;
    //创建 XMLHttpRequest 对象，老版本的 Internet Explorer （IE5 和 IE6）
    //使用 ActiveX 对象：xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
    if (window.XMLHttpRequest) {
        //code for all new browsers
        xmlHttp = new XMLHttpRequest;
    } else if (window.ActiveXObject) {
        //code for IE5 and IE6
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //判断是否支持请求
    if (xmlHttp == null) {
        alert("浏览器不支持xmlHttp");
        return;
    }
    //请求方式， 转换为大写
    var httpMethod = (obj.method || "Get").toUpperCase();
    //数据类型
    var httpDataType = obj.dataType || 'json';
    //url
    var httpUrl = obj.url || '';
    //异步请求
    var async = true;
    //post请求时参数处理
    if (httpMethod == "POST") {
        requestData = JSON.stringify(obj.data)
        console.log(requestData);
    }
    //请求接口
    if (httpMethod == 'GET') {
        xmlHttp.open("GET", httpUrl, async);
        xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlHttp.send(null);
    } else if (httpMethod == "POST") {
        xmlHttp.open("POST", httpUrl, async);
        xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlHttp.send(requestData);
    }
	//onreadystatechange 是一个事件句柄。它的值 (state_Change) 是一个函数的名称，
	//当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。
	//状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码
	xmlHttp.onreadystatechange = function () {
	    //complete
	    if (xmlHttp.readyState == 4) {
	        if (xmlHttp.status == 200) {
	            //请求成功执行的回调函数
	            successfun(xmlHttp.responseText);
	        } else {
	            //请求失败的回调函数
	            errFun;
	        }
	    }
	}
}

$(function(){
	userAjaxRequest(1);
})

/**
 * jquery ajax 获取用户信息
 * 获取用户信息
 */
function userAjaxRequest(uid){
	$.ajax({
		url: BASEURL+'user',//接口地址
		data: {uid: uid},
		async: true,
		type: 'GET',
		contentType: 'application/x-www-form-urlencoded', // 传参格式（默认为表单application/x-www-form-urlencoded） json为application/json
		//dataType: 'json',//期望后端返回的数据类型
		success: function (res) {
			var resObj=JSON.parse(res);
			if(resObj.code==1){
				serUser(resObj.data);
			}else{
				alert(resObj.msg);
			}
		},
		error: function (err) {
			alert(err);
		}
	});
}

/**
 * @param {Object} user
 * 设置用户信息
 */
function serUser(user){
	$("#username").text(user.username);
}

二，数据本地存储和返回箭头

html源码

<body>
<header class="tc">
   <a href="javascript:history.go(-1)"></a>
        关于我们
   </header>
   <div id="privacy">
       <span>隐私政策</span>
        <img src="images/icon_create_dialog_rightarrow_night.png" />
   </div>
   <div id="logout">
        <button οnclick="logout()">退出登录</button>
   </div>
</body>

/**
 * line-height: 44px;行内高度固定，来进行垂直居中
 * text-align: center;行内元素水平居中
 * position: fixed;固定在顶部，不存滑动而动
 * z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住
 */
header{
    width:100%;
    height: 44px;
    line-height: 44px;
    color:#333;
    background: #fff;
	position: fixed;
	text-align: center;
	top:0;
	z-index: 99;
}

/**
 * background 设置图片,不在同级目录必须加两个点，表示回退上级目录
 * width: 30px; height: 30px;该用法必须同时设置固定宽高，和背景宽高
 * float: left; 必须设置做浮动，否则箭头不会出现
 */
header a{
    width: 24px;
    height: 24px;
    background: url('../images/icon_left_grey.png'); 
    background-size:24px 24px;
	margin-top:10px;
	margin-left: 5px;
	float: left;
}
body{
    padding-top: 40px;
    background: #eee;
}


#privacy{
	height: 40px;
	background-color: white;
	margin-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
}
#privacy span{
	height: 40px;
	line-height: 40px;
}
#privacy img{
	height: 20px;
	text-align: center;
	float: right;
	margin-top: 10px;
}

#logout{
	margin-top: 20px;
	text-align: center;
}
#logout button{
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
	margin: 0 auto;
}

window.onload=function(){
	var uid=window.localStorage.getItem("uid");
	var currentUrl=window.location.href;
	if(uid==null&&currentUrl.endsWith('index.html')==false){
		toLogin()
		return;
	}
}



/**
 * 跳转登录
 */
function toLogin(){
    window.history.replaceState(null, "", './login.html');
	window.history.go(0);
}

function logout(){
	if(confirm("确定退出登录")){
		localStorage.clear();
		toLogin();
	}
}