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

Question

好的，使用 Scala Play Framework，我的应用程序 Controller 中有一个 Action 方法，用于访问特定序列的数据库并使用 Ok(json) 发送 JSON 对象，可以通过路由 GET/json 访问该对象/:串行 Controller .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)
}

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

因此，当选择 Storage Center 时，该数字会通过 AJAX 发送到 /json/:serial 并应请求一个 JSON 对象作为结果，然后该对象将填充表单中的其他字段.

编辑2:

这是 View 的标记。它使用 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6d5c3cac3c5d2f4c7c5cde6d4c7c5cd88c8c7cbc3" rel="noreferrer noopener nofollow">[email protected]</a>">@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

一位 friend 帮助了我，我找到了答案!正如预期的那样，使用 jQuery 非常简单。

前端:

唯一改变的是 HTML select 标签获得了一个 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); 更容易，但请参阅官方文档获取知识。

成功了!

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