JSON 教程
JSON 教程
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="https://api.seniverse.com/v3/weather/now.json?key=SRgM4ZKVU_nhcphg3&location=beijing&language=zh-Hans&unit=c">天气</a><form action="114.115.154.154:5111/admin/adminLogin" method="post">账号：<input type="text" name="account"><br>密码：<input type="password" name="pwd"><br><button type="submit">登录</button></form>
</body>
</html>
json对象
object
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>json对象</title>
</head><body><script>let json = {//键值对 key:value'id': '001','name': '张三的','age': 18}//数组对象let stus =[{ 'id': '001', 'name': '张三', 'age': '18' },{ 'id': '002', 'name': '张2三', 'age': '19' },{ 'id': '003', 'name': '张3三', 'age': '16' },]//访问document.write('<h2>' + stus[0].name + '</h2>')</script>
</body></html>
实例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证码</title><style>img{height: 80px;}</style>
</head>
<body><form action="#"><input type="text" name="yzm" placeholder="验证码"><img src="img/image.png" alt=""><input type="submit" value="提交" class="sb"></form><script>let yan=''//验证码document.querySelector('img').onclick=function(){//创建对象let xmlReq;//检查浏览器是否支持XMLHttpRequestif(window.XMLHttpRequest){xmlReq=new XMLHttpRequest()}else{xmlReq=new ActiveXObject()//老版本IE使用}//发送请求xmlReq.open('GET',//提交方式//url'https://route.showapi.com/26-4?appKey=B62A6E7D02b4494E98De7eD05F23602e',true)xmlReq.send()//获取响应xmlReq.onreadystatechange=function(){//响应成功if (xmlReq.readyState==4&&xmlReq.status==200) {//xmlhttp.responseText响应的数据 字符串格式// alert(xmlReq.responseText)let str=xmlReq.responseText//把字符串转换成json对象let json=JSON.parse(str)// alert(json)// alert(json.showapi_res_body.img_path_https)document.querySelector('img').setAttribute('src',json.showapi_res_body.img_path_https)yan=json.showapi_res_body.text}else{console.log('xmlReq.status'+xmlReq.status);console.log('xmlReq.readyState'+xmlReq.readyState);}}}//验证document.querySelector('.sb').onclick=function(){let val=document.getElementsByName('yzm')[0].valueif(val===yan){alert('提交')}else{alert('验证失败')}}</script>
</body>
</html>