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>
相关推荐
Mephisto.java2 分钟前
【大数据学习 | kafka高级部分】kafka的文件存储原理
大数据·sql·oracle·kafka·json
别拿曾经看以后~22 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死25 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试28 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人36 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人37 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR42 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香44 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书