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;
//检查浏览器是否支持XMLHttpRequest
if(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].value
if(val===yan){
alert('提交')
}else{
alert('验证失败')
}
}
</script>
</body>
</html>
原文地址：https://blog.csdn.net/MX0625/article/details/142570144
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！