Question

好的，使用Scala Play Framework我的Application Controller中有一个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对象（使用route / 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)
}

这是一张大致形状的图片（我觉得看到实际的页面比阅读标记更容易）

Form

因此，当选择Storage Center时，该号码将通过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 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);更容易，但请参阅官方知识文档。

有效！

欢迎对我将尝试回答的问题发表评论！

如何AJAX到HTTP请求JSON预先填充Web表单？

1 个答案: