如何通过 AJAX 到 HTTP 请求 JSON 来预填充 Web 表单？

Question

好的，使用 Scala Play Framework 我的应用程序控制器中有一个 Action 方法，它访问特定序列的数据库并使用 Ok(json) 发送 JSON 对象，可以通过路由 GET /json/:serial controllers.Application.getData(serial: String) 访问。这部分有效；我能够直接通过 localhost/json/serial# 检索特定序列号的未格式化 JSON 对象。

在我看来，有一个页面用于编辑这个数据库信息。有一个带有序列号列表的 HTML 选择下拉列表，当其中一个被选中时，我想发送一个带有该序列号的 AJAX 请求到 /json/### 并获得一个 JSON 对象作为回报。一旦我有了 JSON 对象，表单应该填充该信息，以便用户知道他们正在编辑什么。

所以本质上我的问题是如何使用 AJAX/jQuery 通过 HTTP 请求 JSON 对象（使用路由 /json/:serial），以便在串行时使用 JSON 对象中的各种字段填充 HTML 表单从下拉列表中选择？

如果有什么不清楚或太模棱两可，请告诉我！谢谢

编辑：一些代码：

val getData(serial: String) = Action {

val scInfo = *some database query*
val ctrlInfo = *another database query*
val json: JsValue = Json.obj(
        "name" -> scInfo(0)._1,
        "notes" -> scInfo(0)._2,
        "ctrl1" -> Json.obj("name" -> scInfo(0)._3,
            "port" -> scInfo(0)._4,
            "apc" -> scInfo(0)._5),
        "ctrl2" -> Json.obj("name" -> ctrlInfo(0)._1,
            "port" -> ctrlInfo(0)._2,
            "apc" -> ctrlInfo(0)._3),
        "rack" -> scInfo(0)._6,
        "comtrol" -> scInfo(0)._7
    )

    Ok(json)
}

这是表单大致外观的图片（我认为查看实际页面比阅读标记更容易）

因此，选择存储中心时，通过Ajax将该数字发送到/json/:serial并应要求json对象，然后填充表单中的其他字段。

编辑 2：

这是视图的标记。它使用 Play 模板引擎，因此前面带有 @ 的任何东西都只是生成 scala 代码的标记。

<div class="header-wrapper">
        <h2 class="header">Edit Information for...</h2>
    </div>

    <div class="sc-content">
    <form class="form-horizontal col-md-12" role="form">
        <div class="form-group">
            <label for="inputSC" class="control-label">Storage Center</label><br>
            <div class="col-sm-6">
                <select class="form-control" onfocus="this.blur()" id="inputSC" placeholder=" ">
                    @storageCenters.map { sc =>
                    <option id="selectSC@sc._1">@{sc._1.replace('-', '/')}</option>
                    }
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="inputRack" class="control-label">Rack</label><br>
            <div class="col-sm-6">
                <select class="form-control" onfocus="this.blur()" id="inputRack" placeholder=" ">
                    @racks.map { rack =>
                    <option id="selectRack@rack.name">@rack.name</option>
                    }
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="inputConsoleIP" class="control-label">Console IP/Port</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputConsoleIP" placeholder="i.e. 127.0.0.1">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputPort" placeholder="i.e. 00000">
            </div>
        </div>
        <div class="form-group">
            <label for="inputAPC" class="control-label">APC Outlet</label><br>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="inputAPC" placeholder="i.e. 12">
            </div>
        </div>
        <div class="form-group">
            <label for="inputNotes" class="control-label">Notes</label><br>
            <div class="col-sm-12">
                <input type="text" class="form-control" id="inputNotes" value="Default">
            </div>
        </div>
        <div class="form-group">
            <div style="margin-lefT:4%;">
                <button type="submit" class="btn btn-default">Submit Changes</button>
            </div>
        </div>
    </form>
    </div>

Answer 1

一位朋友帮助了我，我能够想出一个答案！正如预期的那样，使用 jQuery 很简单。

前端：

唯一改变的是 HTML 选择标签获得了一个 onchange="fillForm()" 属性，该属性将在任何时候选择一个序列号时调用一个 JS 函数。

<select class="form-control" onfocus="this.blur()" id="inputSC" onchange="fillForm()">

后端：

我创建了一个 JS 文件，其中包含与此表单相关的多个函数，尤其是 fillForm() 函数。

function fillForm() {
    var val = $('#inputSC').val() // selected value
    val = val.replace('/', '-');
    $.getJSON('/json/' + val, function (data) {
        //printJSON(data);
        $('#inputRack').val(data.rack);
        $('#inputNotes').val(data.notes);
        $('#inputComtrol').text(data.comtrol);
        $('#inputPort').val(data.ctrl1.port);
        $('#inputAPC').val(data.ctrl1.apc);
    });
}

而对于JavaScript/jQuery不是很好的人来说，这个函数首先取回下拉选择标签的值（注意在页面上从下拉列表中选择一个新的值会触发这个函数) 然后格式化字符串 （我的应用程序特有的东西）。然后使用 jQuery，它调用 $.getJSON(url [, data] [,success]); (here's the documentation) 从我已经在路由中设置的 URL 中检索特定于序列的 JSON，然后将表单中每个字段的值更改为 JSON 中的数据.在我看来，将$.getJSON 签名视为$.getJSON(url, callback); 更容易，但请参阅文档以获取官方知识。

成功了！

请随意评论我将尝试回答的问题！