在线查询系统 - 快速便捷获取信息 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>在线查询系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            text-align: center;
            margin-top: 50px;
        }
        form {
            width: 50%;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: bold;
        }
        input[type='text'] {
            padding: 10px;
            font-size: 16px;
            width: 100%;
            border-radius: 5px;
            border: none;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
        button[type='submit'] {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button[type='submit']:hover {
            background-color: #3e8e41;
        }
        .result {
            margin-top: 20px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .result h2 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .result p {
            font-size: 18px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>在线查询系统</h1>
    <form id='form' method='get'>
        <label for='id'>ID：</label>
        <input type='text' id='id' name='id' placeholder='在此处填写ID'>
        <button type='submit'>查询</button>
    </form>
    <div id='result' class='result' style='display:none;'>
        <h2>查询结果</h2>
        <p>姓名：<span id='name'></span></p>
        <p>年龄：<span id='age'></span></p>
        <p>性别：<span id='gender'></span></p>
    </div>
    <script>
        const form = document.querySelector('#form');
        const result = document.querySelector('#result');
        const name = document.querySelector('#name');
        const age = document.querySelector('#age');
        const gender = document.querySelector('#gender');
<pre><code>    form.addEventListener('submit', async (event) =&gt; {
        event.preventDefault();
        
        const id = document.querySelector('#id').value;
        const url = `https://api.phym.cloud/free/hlx/ksqz1.1/api.php?id=${id}`;
        
        try {
            const response = await fetch(url);
            const data = await response.json();
            
            name.innerText = data.name;
            age.innerText = data.age;
            gender.innerText = data.gender;
            result.style.display = 'block';
        } catch (error) {
            console.log(error);
        }
    });
&lt;/script&gt;
</code></pre>
</body>
</html>