Collection
Collection
前端
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取栏目信息</title>
</head>
<body>
<button>查看电影分类</button>
<ul>
</ul>
<script>
var btn = document.getElementsByTagName('button').item(0);//item() 方法返回一个节点列表中指定索引的节点。
btn.onclick = function () {
// console.log('hello')
//1 创建一个Ajax对象
var request = new XMLHttpRequest();//XMLHttpRequest() 请求对象，它可以获取POST方式提交的数据，也能获取GET方式提交的数据
//2 监听请求
request.onreadystatechange = function () { //onreadystatechange 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
if(request.readyState=== 4){ //readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
// var px = document.getElementsByTagName('p').item(0);
// console.log(request.responseText);
var data = JSON.parse(request.responseText); //parse()解析JSON格式字符串变并将JSON对象直接专为原生JS对象
// console.log(data); //data 是JavaScript对象
//循环动态创建 li元素
var ul = document.getElementsByTagName('ul')[0];
GetRequest();
console.log(strs[1])
$("li").eq(strs[1]-1).css("background","red");
var span1=document.createElement('a');
var span2=document.createElement('a');
span1.innerText = ('首页');
span1.setAttribute("href","show.php?p=1");
span2.innerText = ('尾页');
span2.setAttribute("href","show.php?p="+data[0]);
console.log(span1);
$(".pages").eq(0).prepend(span1);
$(".pages").eq(0).append(span2);
data.forEach(function (value) { // forEach() 遍历对象 调用数组的每个元素， 参数的值value就是遍历的内容
//data遍历出来是多个对象,用‘{}’ 创建的是对象自变量 对象是根据键访问的 例如： alias、cate_id、name 是字符串
var li = document.createElement('li'); // createElement() 创建元素节点
li.innerText = value['alias']; // innerText()插入一段纯文本 这里也可以用 innerHtml() 用value获取数据 键的数据
ul.appendChild(li); // appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
})
}
};
//3 发送请求
request.open('GET','get_cate.php',true);
request.send(null);
}
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
if (url.indexOf("?") != -1) { //判断是否有参数
var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
strs = str.split("="); //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
// alert(strs[1]); //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
}
// if (strs[1]=1){
// var myCollection=document.getElementsByTagName('a');
// console.log(myCollection);
// }
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
脚本语言
<?php
//链接数据
$pdo = new PDO('mysql:host=127.0.0.1;dbname=xuexi','root','root');
//创建预处理对象
$stmt = $pdo->prepare('SELECT * FROM `category`');
//执行sql
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
//echo '<pre>' .print_r($result,true);
echo json_encode($result); //这里$result变量转JSON格式输出点击 "运行实例" 按钮查看在线实例