JSON基础、原生的ajax及JQuery.ajax
一、JSON
1、什么是JSON：
一种轻量级的数据交换格式，主要用于跟服务器进行交换数据
（1）从服务器上读取JSON数据，将json数据转化成js对象，然后在网页中使用数据
（2）json数据结构：对象+数组
<body>
<script>
var json = {
data:{
students:[
{
name:'tom',
age:18,
skill:['sing','run']
},
{
name:'bob',
age:19,
skill:['study','swim']
}
]
}
}
//获取数组内容，可以用for遍历或each
console.log($.each(json.data.students,function(index,item){
console.log(index,item);
console.log(item.name);
}));
</script>
</body> 
2、JSON.stringify()：json对象转成字符串
3、JSON.parse()：字符串【注意需要是标准的json字符串格式转成json】
<script>
var json = {
data:{
students:[
{
name:'tom',
age:18,
skill:['sing','run']
},
{
name:'bob',
age:19,
skill:['study','swim']
}
]
}
}
var str = JSON.stringify(json)
console.log(str);
var obj = JSON.parse(str)
console.log(obj);
</script> 
二、AJAX（用户登录 - 天行数据TianAPI）
1、open(method,url,async)
method：请求类型（GET、POST）url：接口地址
async:true（异步）、false（同步）
【接口基本上都是异步（可以同时进行）的】
2、请求类型：get和post
（1）相同：都可以跟服务器进行数据交互（2）不同：
①传送方式：get是通过地址栏进行传输，post是通过报文传输
②传送长度：get的长度会被限制，post不限长度
③安全性：get安全性低，参数会暴露在地址栏，一般用于获取，post安全性高，一般可以传输数据
3、send(string)：发送请求【post情况下string写参数的地方】
4、参数传递
（1）get：在地址栏上，url后面拼接?key=value&key=value（2）post：send(key=value)
5、响应
responseText属性：获取以字符串形式返回的数据（1）Jscript的get写法：（天行的舔狗日记为例）
<script>
//创建
var xhr = new XMLHttpRequest()
xhr.open(
'GET',
'http://api.tianapi.com/tiangou/index?key=a3828b7efb833ce8c26d05f10ed40e04',
true
)
//发送
xhr.send()
//响应
xhr.onload = function(){
console.log(xhr.responseText);
var data = JSON.parse(xhr.responseText)
console.log(data);
}
</script> 
（2）Jscript的post写法：
<script>
var xhr = new XMLHttpRequest();
xhr.open(
"POST",
"http://120.78.172.212:7789/students/sys/loginWeb",
true
);
// 配置Content-Type： application/x-www-form-urlencoded
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded",
"charset=UTF-8"
);
// 发送
xhr.send("username=lyx&password=888888");
// 响应
xhr.onload = function () {
console.log(xhr.responseText);
var data = JSON.parse(xhr.responseText);
console.log(data);
};
</script> 
（3）JQ的get写法：
<script>
$.ajax({
async:true,
type:'GET',
url:'http://api.tianapi.com/tianqi/index?key=408065bffbb866c9782f501d3ff046bf&city=福州市',
success:function(res){
console.log(res);
}
})
</script> <script>
$.ajax({
async:true,
type:'POST',
data:{
key:'a3828b7efb833ce8c26d05f10ed40e04'
},
url:'http://api.tianapi.com/tiangou/index',
success:function(res){
console.log(res);
}
})
</script> 
三、回顾JS、JQ，代码例子
1、简单的添加、删除、编辑表格（具体效果，小伙伴可以复制代码自己操作一下哦🧐）
<!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="../jquery-3.6.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
input {
width: 400px;
height: 30px;
padding-left: 10px;
outline: none;
}
.all {
margin-top: 10px;
text-align: center;
margin-bottom: 30px;
}
table {
margin: auto;
}
th {
width: 300px;
height: 20px;
border: 2px solid rgba(134, 131, 131, 0.216);
box-sizing: border-box;
background-color: skyblue;
color: #fff;
}
.btn1 {
padding: 5px 10px;
box-sizing: border-box;
background-color: skyblue;
color: #fff;
border: 1px solid skyblue;
border-radius: 3px;
}
td {
text-align: center;
height: 30px;
border: 2px solid rgba(134, 131, 131, 0.216);
box-sizing: border-box;
}
.btn2 {
padding: 2px 4px;
box-sizing: border-box;
}
.btn3 {
padding: 2px 4px;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- <form action=""> -->
<div class="all">
<span style="font-weight: bold;">姓名：</span>
<input type="text" id="user" placeholder="请输入姓名">
<span style="font-weight: bold;">年龄：</span>
<input type="text" id="age" placeholder="请输入年龄">
<button class="btn1">添加</button>
</div>
<!-- </form> -->
<div class="main">
<table border="1" cellspacing="0">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<!-- <tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>
<button class="btn2">编辑</button>
<button class="btn3">删除</button>
</td>
</tr> -->
</table>
</div>
<script>
var table = document.querySelector('table')
var arr = [
{
name: '张三',
age: 17
},
{
name: '李四',
age: 20
},
{
name: '王五',
age: 23
}
]
//添加
var add = document.querySelector('.btn1')
add.onclick = function(){
var userName = document.querySelector('#user')
var userAge = document.querySelector('#age')
//去掉首尾空格trim()
if(userName.value.trim().length != 0 & isNaN(parseInt(userAge.value.trim()))==false){
var newObj =
{
name : userName.value,
age : userAge.value
}
arr.push(newObj)
userName.value = ''
userAge.value = ''
console.log(arr);
create()
}else{
alert('添加失败，请输入正确的名字和年龄')
}
}
//创建
function create() {
//清除
table.innerHTML = ''
//创建表头
var trTh = document.createElement('tr')
trTh.innerHTML = `
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
`
table.appendChild(trTh)
//创建节点
for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
var newTr = document.createElement('tr');
console.log(newTr);
newTr.innerHTML = `
<td>${i+1}</td>
<td>${arr[i].name}</td>
<td>${arr[i].age}</td>
<td>
<button class="btn2">编辑</button>
<button class="btn3">删除</button>
</td>
`
table.appendChild(newTr);
//编辑
var editArr = document.querySelectorAll('.btn2')
for(var j = 0;j<editArr.length;j++){
(function(j){
editArr[j].onclick = function(){
// console.log(j);
//修改
var editName = prompt('请输入姓名')
if(editName.trim().length != 0){
// console.log(editName.length);
arr[j].name = editName
}else{
alert('请输入正确的姓名')
}
var editAge = parseInt(prompt('请输入年龄'))
if(isNaN(editAge)==false){
arr[j].age = editAge
}else{
alert('请输入正确的年龄')
}
// console.log(arr);
create()
}
})(j)
}
//删除
var delArr = document.querySelectorAll('.btn3')
for(z = 0;z<delArr.length;z++){
(function(z){
delArr[z].onclick = function(){
// console.log(z);
arr.splice(z,1)
// console.log(arr);
create()
}
})(z)
}
}
}
create()
</script>
</body>
</html> 
2、实现简单界面的转换（具体效果，小伙伴可以复制代码自己操作一下哦🧐）
<!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="../jquery-3.6.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 50px;
background-color: #ccc;
text-align: center;
line-height: 50px;
}
ul{
display: flex;
justify-content: center;
}
li{
width: 200px;
height: 50px;
list-style: none;
color: #fff;
}
.active{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>本店好评商品</li>
</ul>
</div>
<div class="main">
<div>商品介绍</div>
<div>规格与包装</div>
<div>售后保障</div>
<div>商品评价</div>
<div>本店好评商品</div>
</div>
<script>
$('li').eq(0).addClass('active')
$('.main div').eq(0).show().siblings().hide()
$('li').click(function(){
$(this).addClass('active').siblings().removeClass('active')
$('.main div').eq($(this).index()).show().siblings().hide()
})
</script>
</body>
</html> 
JS及JQuery框架 文章被收录于专栏
JavaScript的基本语法（变量、数据类型、运算符等等），流程控制（顺序、分支、循环），数组，函数（作用域、预解析），对象（自定义、内置），DOM（节点操作、获取元素），BOM（定时器、回调函数、同步异步） JQuery框架的入口函数，隐式迭代，排他思想，链式编程，样式操作，属性操作，事件监听
查看8道真题和解析