关于接口,如何写一个关于自己的查询网

接口:http://ts.lovetly.top/agent?qq=123456 【如有违规告知下谢谢!源码来自网络随机找的,想学习写接口谢谢,或者有教程也可以】
返回:
{"name":"123456","qq":"123456","Grade":"管理员","app":"综合插件"}
{"name":"654321","qq":"654321","Grade":"用户","app":"单插件"}
如何把以下源码查询换成上面的!


<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content>
  <title>XXX</title>
  <meta name="keywords" content>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/nucleo.css" type="text/css">
  <link rel="stylesheet" href="css/e7dg.min.css" type="text/css">
  <link rel="stylesheet" href="css/embellish.css" type="text/css">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <script src="//v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
  <script src="//lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>
</head>
<body class="bg-default">
  <div class="main-content">
    <!-- Header -->
    <div class="header bg-gradient-purple py-6">
      <div class="container">
        <div class="header-body text-center mb-7">
          <div class="row justify-content-center">
            <div class="col-xl-5 col-lg-6 col-md-8 px-5">
              <h1 class="text-white">授权查询</h1>
              <p id="hitokoto" class="text-lead text-white">:D 获取中...</p>
            </div>
          </div>
        </div>
      </div>
      <div class="separator separator-bottom separator-skew zindex-100">
      </div>
    </div>
    <!-- Page content -->
    <div class="container mt--8 pb-5">
      <div class="row justify-content-center">
        <div class="col-lg-5 col-md-7">
          <div class="card bg-secondary border-0 mb-0">
            <div class="card-body px-lg-5 py-lg-5">
              <div class="text-center text-muted mb-4">
                <small>欢迎使用 守护网络系列插件</small>
              </div>
               
                <div class="form-group mb-3">
                  <div class="input-group input-group-merge input-group-alternative">
                    <div class="input-group-prepend">
                      <span class="input-group-text"><i class="fa fa-qq"></i></span>
                    </div>
                   <input type="text/css" class="form-control round" id="qq" name="qq" maxlength="16" placeholder="请输入要查询的QQ...">
                  </div>
                </div>
                <div class="custom-control custom-control-alternative custom-checkbox">
                  <input class="custom-control-input" id=" customCheckLogin" type="checkbox" required>
                  <!--<label class="custom-control-label" for=" customCheckLogin">-->
                    <!--<span class="text-muted">同意删除</span>-->
                  </label>
                </div>
                <div class="text-center">
                  <button type="submit" class="btn btn-primary my-4">立即查询</button>
                </div>
                 
                <div class="text-muted mb-3">
                <small><i class="fa fa-exclamation-circle"></i> XXX</a></br> </br></br>
                 
                支持框架:</br>XXX
                 
                 
                </small>
                </div>-->
               
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<script>
    layui.use(['layer'], function () {
        window.layer = layui.layer;
        $.ajax({
            url: './function/GetVerification.php',
            type: 'GET',
            dataType: 'html',
            success: function (data) {
                $('#vaptchaContainer').html(data);
            },
            error: function (data) {
                layer.msg('[' + data.status + ']' + data.statusText);
            }
        });
    });
 
 
    function chaxun() {
        var qq = $('#qq').val();
        var token ='';
        if (typeof vaptchaObj != 'undefined'){
            token = vaptchaObj.getToken();
            vaptchaObj.reset();
        }
        var loading = layer.load();
        $.ajax({
            url: 'ajax.php?mod=queryauth',
            type: 'POST',
            dataType: 'html',
            data: 'qq=' + qq + '&token=' + token,
            success: function (data) {
                layer.close(loading);
                layer.alert(data);
            },
            error: function (data) {
                layer.close(loading);
                layer.msg('请求失败' + data);
            }
        })
    }
 layer.open({
                        type: 1
                        ,
                        area: '300px;'
                        ,
                        shade: 0.8
                        ,
                        closeBtn: 0
                        ,
                        id: 'LAY_layuipro2' //设定一个id,防止重复弹出
                        ,
                        btn: ['我知道了']
                        ,
                        btnAlign: 'c'
                        ,
                        shadeClose: true
                        ,
                        moveType: 1 //拖拽模式,0或者1
                        ,
                        title: '<i class="fa fa-bullhorn"></i> 守护网络'
                        ,
                        content: '插件支持7大平台,仅需修改插件后缀即可!'
                        ,
                        yes: function (index, layero) {
                            layer.closeAll();
                        }
                    });
</script>
</script>
  <!-- Footer -->
  <footer class="py-3" id="footer-main">
    <div class="container">
      <div class="row align-items-center justify-content-xl-between">
        <div class="col-xl-6">
   <!-- By作者时迁-->
          <div class="copyright text-center text-xl-left text-muted">
            &#169; 2021 <a href="/" class="font-weight-bold ml-1 text" target="_blank">XXX</a>
          </div>
        </div>
        <div class="col-xl-6">
          <ul class="nav nav-footer justify-content-center justify-content-xl-end">
            <li class="nav-item">
              <a href="" class="nav-link" target="_blank">极致体验·守护网络&#127809;.</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</body>
</html>