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

Question

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

在我看来，有一个页面可以编辑这个数据库信息。 There is an HTML select drop down with a list of serial numbers, and when one of them is selected I'd like to send an AJAX request with that serial number to/json/### and get a JSON object in return.一旦我有了 JSON 对象，就应该用该信息填充表单，以便用户知道他们正在编辑什么。

所以基本上我的问题是如何使用 AJAX/jQuery 通过 HTTP(使用路由/json/:serial)请求 JSON 对象，以便在序列化时我可以使用 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)
}

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

So when a Storage Center is selected, that number is sent via AJAX to /json/:serial and should request a JSON object as a result, which will then populate the other fields in the form .

编辑 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="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

一位 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不是很好的人来说，这个函数首先获取下拉select标签的值(注意在页面下拉选择一个新的值会触发这个函数) 然后格式化字符串 (特定于我的应用程序的内容)。然后使用 jQuery，它调用 $.getJSON(url [, data] [,success]); (here's the documentation)从我已经在路由中设置的 URL 检索特定于序列的 JSON，然后将表单中每个字段的值更改为 JSON 中的数据。在我看来，将$.getJSON签名想象成$.getJSON(url, callback);比较容易，但是要引用官方的文档。

成功了!

请随时评论我会尝试回答的问题!