如何将返回的JSON数据填充至HTML表单？

没问题，我来帮你搞定这个需求——把Web服务返回的JSON数组填充到表单输入框里很简单，咱们一步步来实现：

1. 给按钮添加点击事件与数据填充逻辑 #

你只需要在List.jsp里加一段JavaScript代码，监听「Get」按钮的点击，调用Web服务拿到数据后，把对应的值塞进输入框就行。这里推荐用现代浏览器都支持的fetch API，代码简洁易读：

<!-- 把这段JS放在List.jsp的</body>标签之前或者表单之后都可以 -->
<script>
// 监听Get按钮的点击事件
document.getElementById('btnGet').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止表单默认提交刷新页面的行为
    
    // 替换成你的实际Web服务接口地址
    fetch('你的Web服务接口URL')
        .then(response => {
            // 检查请求是否成功
            if (!response.ok) throw new Error('请求失败，请检查接口');
            return response.json(); // 把返回的内容解析成JSON格式
        })
        .then(userData => {
            // 因为返回的是数组，咱们取第一个用户对象（如果有多个可以循环处理）
            if (userData.length > 0) {
                const user = userData[0];
                // 填充用户名输入框
                document.getElementById('usernameEn').value = user.username;
                
                // 如果你之后要加邮箱、密码的输入框，直接照着下面加就行
                // document.getElementById('emailEn').value = user.email;
                // document.getElementById('passwordEn').value = user.password;
            }
        })
        .catch(error => {
            console.error('获取数据出错:', error);
            alert('获取用户数据失败，请稍后重试~');
        });
});
</script>

2. 完善表单（可选，如果你需要填充更多字段） #

如果你的需求不止填用户名，还要展示邮箱和密码，记得给表单加上对应的输入框：

<form>
    Enter Username:<br>
    <input type="text" id="usernameEn" name="username"><br>
    Enter Email:<br>
    <input type="email" id="emailEn" name="email"><br>
    Enter Password:<br>
    <input type="password" id="passwordEn" name="password"><br>
    <button id="btnGet">Get</button>
</form>

一些关键细节提醒 #

• e.preventDefault()：必须加这个，不然点击按钮表单会默认提交，页面直接刷新，咱们的异步请求就白做了。
• 数组处理：因为返回的是[]包裹的数组，所以用userData[0]取第一个元素。如果接口会返回多个用户，你可以用forEach循环生成多个表单或者列表项。
• 错误处理：别忘记加catch块，网络出问题或者接口返回错误时，能给用户友好提示，也方便你调试。

如果需要兼容IE这类旧浏览器，可以用XMLHttpRequest替代fetch，代码示例如下：

<script>
document.getElementById('btnGet').addEventListener('click', function(e) {
    e.preventDefault();
    
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '你的Web服务接口URL', true);
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            const userData = JSON.parse(xhr.responseText);
            if (userData.length > 0) {
                const user = userData[0];
                document.getElementById('usernameEn').value = user.username;
                // 其他字段同理添加
            }
        } else {
            console.error('请求失败，状态码:', xhr.status);
            alert('获取数据失败');
        }
    };
    xhr.onerror = function() {
        console.error('网络连接异常');
        alert('网络出问题啦，请检查连接~');
    };
    xhr.send();
});
</script>

内容的提问来源于stack exchange，提问作者Hasitha Jayawardana