Question

我要创建一个表单，用户必须提交电子邮件才能访问，而数据库中已经存在的客户会触发API，该API从服务器返回响应，其中包含完成主表单所需的所有数据。我正在尝试在弹出窗口中显示主表单，而我想为先前已注册的用户使用服务器JSON响应重新填充表单，因此他们只需在主表单弹出窗口中按“提交”按钮即可完成操作而未注册的用户只需在主表单中手动输入其信息。

这是数据库中存在的用户电子邮件的基本示例服务器响应：

{
    "execTime": 20,
    "billedTime": 20,
    "Table": [{
        "firstName": "JOHN",
        "lastName": "DOE",
    }]
}

这是我尝试用

完成的表单的示例

<form action="example.url" method="POST">
  <label for="firstName">First Name</label><br>
  <input type="text" id="firstName" name="firstName"><br>
  <label for="lastName">Last Name</label><br>
  <input type="text" id="lastName" name="lastName"><br>
<input type="submit" value="SUBMIT">
</form>

实现此目标需要什么脚本？我希望响应数据重新填充现有用户或不存在用户的表单字段，然后显示空白表单字段供用户输入信息

Answer 1

这只是普通的javascript对象，请检查此reference有关如何处理Javascript对象的信息

const data = {
    "execTime": 20,
    "billedTime": 20,
    "Table": [{
        "firstName": "JOHN",
        "lastName": "DOE",
    }]
}

document.getElementById('firstName').value = data.Table[0].firstName;
document.getElementById('lastName').value = data.Table[0].lastName;

<form action="example.url" method="POST">
  <label for="firstName">First Name</label><br>
  <input type="text" id="firstName" name="firstName"><br>
  <label for="lastName">Last Name</label><br>
  <input type="text" id="lastName" name="lastName"><br>
<input type="submit" value="SUBMIT">
</form>

预填充表单字段JSON响应数据

1 个答案: