<html>
<head lang="en">
<meta charset="UTF-8">
<!--手机上运行时,加上这句话-->
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<!--
display: block; ----设置为块级元素
display: inline; -----设置为内联元素
-->
<title>网页实现listView</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<!-- css样式-->
<style>
* {
margin: 0px;
padding: 0px;
}
/* 固定定位,就是固定下来,并且浮起来
* position: fixed; 绝对定位
* left:0; 距离左边0
* top:0; 距离上边0
* width: 100%; 宽度铺满
*/
.title {
/*
* 里面的文字居中
*/
line-height: 50px;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: cornflowerblue;
color: #fff;
font-size: 20px;
}
.imgid {
width: 85px;
height: 85px;
border: 1px solid #CCCCCC;
}
.divid {
padding-top: 60px;
}
.divid1 {
float: left;
}
.divid2 {
float: left;
}
.divid3 {
margin-left: 10px;
margin-top: 15px;
width: 270px;
font-size: 15px;
}
.divid4 {
margin-left: 10px;
margin-top: 20px;
color: red;
}
/*
* 清除浮动
* clear: both;
*/
.line {
height: 1px;
width: auto;
clear: both;
background-color: #CCCCCC;
}
/*
* overflow: hidden; 在浮动的父元素上,清除浮动
*/
.list {
overflow: hidden;
/*
* 用第边框,表示分割线
*/
border-bottom: solid 0.5px #ccc;
}
/*
* 用第边框,表示分割线
* z-index 属性设置元素的堆叠顺序,值越大,越浮在上面,默认是0
*/
.left{
position: fixed;
margin-top: 0px;
margin-left: 5px;
line-height: 50px;
text-align: center;
color: #fff;
z-index: 1;
}
</style>
</head>
<!--内容-->
<body>
<div class="title">商品列表</div>
<div class="left" onclick="back()">返回</div>
<!--列表-->
<div class="divid" id="root">
</div>
<!--在这里写js代码-->
<script>
// 函数调用
httpdata();
function httpdata() {
// 拿到上个页面传过来的数据
var locArray = location.href.split("=");
// 返回拿到的数组
var shuzu;
// 请求路径
var url = '/api2/product/mobile/getProductList?prodType=1&catalogId=1&fuzzyName=&page=1&rows=20';
//url: '/api/openapi.do?keyfrom=wojiaozhh&key=1770085291&type=data&doctype=json&version=1.1&q=good',//请求的url地址
//http://gcgl.5ulm.cn/product/mobile/getProductList?prodType=1&catalogId=1&fuzzyName=&page=1&rows=20
$.ajax({
url: url,
type: 'get',//设置请求的http方式,method也可以
dataType: 'json',//将服务器端返回的数据直接认定为是这个格式,然后会做一些自动的处理(如果是json字符串,会自动转化为js对象),服务器返回的默认格式是text/html格式
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Authorization", locArray[1]);
},
success: function (data, textStatus, jqXHR) {//请求成功之后执行的回调函数
// 打印数据
console.log(data);
// 成功码
var code = data.resultCode;
if (code != 200) {
return;
}
// 数组
shuzu = data.resultValue;
for (var i = 0; i < shuzu.length; i++) {
//document.write(
var html =
// 条目点击事件
"<div class='list' onclick=\"dianji('" + shuzu[i].productId + "','" + i + "')\">"
// 图片
+ "<div class='divid1'>"
+ "<img class='imgid' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542098238307&di=57d653de5bd7a1f18cc0361cbfff2fdc&imgtype=0&src=http%3A%2F%2Fimg5.gomein.net.cn%2FdescImg%2F201203%2Fdesc271%2F1000100060%2F55_01.jpg'>"
+ "</div>"
// 属性
+ "<div class='divid2'>"
+ "<div class='divid3'>" + shuzu[i].productName + "</div>"
+ "<div class='divid4'>" + "¥" + shuzu[i].dPrice + "</div>"
+ "</div>"
+ "</div>";
$("#root").append(html);
}
},
error: function (jqXHR, textStatus, errorThrown) {//请求失败之后执行的回调函数
document.write("报错了")
}
});
}
/**
* 点击事件的方法
* @param argument
*/
function dianji(argument, i) {
// 跳转并传递数据
alert("条目点击"+argument+">>>"+i);
}
/**
* 返回函数
*/
function back(){
window.location.href = document.referrer;
window.history.back(-1);
}
</script>
</body>
</html>
web前端实现登录,列表等功能
需积分: 40 176 浏览量
2018-11-15
15:08:04
上传
评论 1
收藏 83KB ZIP 举报
zhaihaohao1
- 粉丝: 314
- 资源: 321
最新资源
- PHP端通过modbus协议跟第三方设备进行数据通信
- navicat安装包亲测可用
- 算法部署-使用OpenVINO部署MobileStyleGAN轻量化高保真图像合成算法-项目源码-优质项目实战.zip
- 基于java实现远程采集华为逆变器使用modbus tcp协议进行通讯的设备数据
- Unity画面共享Spout插件
- 基于C++用modbus实现的工业设备的数据采集程序,支持Tcp、串口
- 完结12章AI Agent智能应用从0到1定制开发
- 15白落梅:你是锦瑟我为流年:三毛的万水千山-3491776.mobi
- Federated Learning-Aided Prognostics in the Shipping 4.0: Princi
- OFDM 的鲁棒频率和定时同步文献部分阅读笔记
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈