将对象或对象数组里的数据放在页面上
流程
确定数据是数组还是单独的一个对象。如果是对象，那么直接新增标签，将对象中的某些属性通过${}加入到标签内部的innerHTML（jQuery中html（））中。
再将新标签追加到想要的标签中。
如果是对象数组，需要先对数组进行遍历，每次遍历取到的是一个对象，对每个遍历的对象进行以下同样的操作。
如果是对象，那么直接新增标签，将对象中的某些属性通过${}加入到标签内部的innerHTML（jQuery中html（））中。
再将新标签追加到想要的标签中。
将网络上的数据放在程序中，再放在页面上（使用流程）
通过ajax技术获取网络数据
概念：ajax技术是JavaScript可以向服务器发送数据的请求，并接受服务器返回的数据。语法（jQuery）
$.ajax({
"url":"服务器的网络地址，即获取数据的地址"，
"succes":function(data){
当接受到服务器数据时自动触发该函数
返回的数据保存在data中
//函数的主要内容就是对数据进行处理，比如新建标签放在页面上
}
})
例子
$.ajax({
"url":"https://www.fastmock.site/mock/40e170f960701a834866a0bc956002f6/tickets/getAllArts",
"success":function(data){
console.log(data.goods); //获取的是一个数组
var arr = data.goods;
for(var i = 0; i<arr.length;i++){
var good = arr[i]; //good是每次遍历时拿到的一个商品对象
//放在页面上
showData(good);
}
}});
jQuery获取的是一个对象，所有的数据会作为对象的属性来存在。
流程
根据网络地址利用ajax语法来获取数据
在success里面对获取的数据进行操作
本地存储中的对象数据处理
将对象转为指定格式的字符串
var str = JSON.stringify(对象名); //str就是该对象的字符串形式
将指定格式的字符串转为对象
var obj = JSON.parse(字符串)
本地数据交互
<!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>
<script src="./js/JQuery.3.6.0.js"></script>
</head>
<body>
<h1>注册</h1>
用户名：<input type="text" id="reg_user">密码：<input type="password" id="reg_pass"> <button>注册</button>
<h1>登录</h1>
用户名：<input type="text" id="log_user">密码：<input type="password" id="log_pass"> <button>登录</button>
<script>
//本地存储时处理的对象数据
function register(){
//获取数据
var username = $('#reg_user').val();
var userpass = $('#reg_pass').val();
//将用户数据用对象来保存
var user = {
"name":username,
"pass":userpass
}
//将对象转为字符串
var str = JSON.stringify(user);
localStorage.setItem('user',str);
}
function login(){
var str = localStorage.getItem('user');
//将字符串转为对象
var data = JSON.parse(str);
//进行验证
var username = $('#log_user').val();
var userpass = $('#log_pass').val();
//判断
if(username==data.name && userpass==data.pass){
alert('登录成功');
}else{
alert('用户名或密码输入错误');
}
}
</script>
</body>
</html>
本地数据交互-数组
<!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>
<script src="./js/JQuery.3.6.0.js"></script>
</head>
<body>
<h1>注册</h1>
用户名：<input type="text" id="reg_user">密码：<input type="password" id="reg_pass"> <button>注册</button>
<h1>登录</h1>
用户名：<input type="text" id="log_user">密码：<input type="password" id="log_pass"> <button>登录</button>
<Script>
//本地存储时处理的对象数据
function register(){
//获取数据
var username = $('#reg_user').val();
var userpass = $('#reg_pass').val();
//将新用户数据用对象来保存
var user = {
"name":username,
"pass":userpass
}
//获取本地存储已经有的数据
var str = localStorage.getItem('user');
var users;
if(str==null){
users=[];
}else{
//转为对象（数组）
users = JSON.parse(str);
}
//将新用户追加到数组中
users.push(user);
//将数组转为字符串，保存到本地
var str = JSON.stringify(users);
localStorage.setItem('users',str);
}
</Script>
</body>
</html>
