Java 如何将返回的JSON数据放在HTML表单中

我需要将返回的

JSON

数据放在HTML格式中。我使用web服务调用数据库并获取JSON数据。我想要的是将这些JSON数据放入HTML输入字段中

示例JSON数据（作为数组返回）

jsp中的代码

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

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#btnGet").click(function(event) 
        {
            event.preventDefault();

        $.ajax({
            type: 'GET',
            url:  "http://localhost:8080/WebServiceTest2/webresources/users/get/" + $('#usernameEn').val(),
            dataType: "json",
            success: function(data) {
                console.log(data);
                var userDetails = data;
                renderDetails(userDetails);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('Error: ' + textStatus);
            }
        });
    });
});

function renderDetails(data)
{
    $('#username').val(data.username);
    $('#email').val(data.email);
    $('#password').val(data.password);
};
</script>

输入用户名：



得到



用户名：



电子邮件：




密码：




$（文档）.ready（函数（）
{
$（“#btnGet”）。单击（函数（事件）
{
event.preventDefault（）；
$.ajax({
键入：“GET”，
url:“http://localhost:8080/WebServiceTest2/webresources/users/get/“+$（'#usernameEn'）.val（），
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
var userDetails=数据；
renderDetails（用户详细信息）；
},
错误：函数（jqXHR、textStatus、errorshown）{
警报（'错误：'+文本状态）；
}
});
});
});
函数renderDetails（数据）
{
$（'#username'）.val（data.username）；
$（'#email'）.val（data.email）；
$（'#password'）.val（data.password）；
};

您的REST服务正在返回一个数组，因此要填充表单，您必须访问数组的第一个元素：

$('#username').val(data[0].username);
$('#email').val(data[0].email);
$('#password').val(data[0].password);

或者，您可以在更高的位置执行分配，这样您就不必更改

renderDetails（）

函数：

var userDetails = data[0];

---

最好还添加一个检查，看看返回的数组是否为空。

它起作用了。谢谢，Robby Cornelissen。我如何添加一系列数据，比如，[{“用户名”：“演示”、“电子邮件”：demo@gmail.com，“密码”：“123”}，{“用户名”：“演示2”，“电子邮件”：demo2@gmail.com，“密码”：“123”}，{“用户名”：“演示3”，“电子邮件”：demo3@gmail.com“，”密码“：“123”}]

var userDetails = data[0];