HTML Select 字段通过 ajax 调用 Web 服务

HTML Select field calls web services through ajax

本文关键字：调用 Web 服务 ajax Select 字段 HTML      更新时间：2023-09-26

我有一些表单模式，我可以在其中创建对象以存储到数据库中。在这些表单中，我有一个这样的选择字段：

<div class="form-group" id=existingUser>
    <label>Username</label> <select class="form-control select2"
        style="width: 100%;" th:field="*{user}">
        <option th:each="user: ${users}" th:value="${user.username}"
            th:text="${user.username}"></option>
    </select>
</div>

其中，用户从带有模型的控制器传递。使用这种方法，我必须更新所有页面以刷新选择字段中的值，否则我只能更新显示新创建对象的表，但我不能在选择中使用新字段。问题是性能和外观刷新页面，此外我不能使用这些说明来显示我的信息 

location.reload();
//reload only the tag with id carsTable, so only the table
//$('#carsTable').load(document.URL +  ' #carsTable');
$('#addCarModal').modal("hide");
notifyMessage("Your car has been created!", 'success');
function notifyMessage(textMessage, typeMessage){
    $.bootstrapGrowl(textMessage, {
        type: typeMessage, // (null, 'info', 'error', 'success')
    });
}

有没有办法在调用模态时调用 ajax？或者我可以将数据从javascript传递到HTML（如果我在单击添加按钮时检索值）。有时我还会检查选择字段是否为空，在这种情况下，在模态内显示一条消息，而不是表单。谢谢

更新。我说了这段代码：

要从仅成功开始，请管理： 

function freeUserController($scope) {
   $http.get("https://localhost:8080/users/")
    .success(function(data) {
      $scope.users = data;          
    });
}

在我的 HTML 页面中：

<div ng-controller="freeUserController" class="form-group" id=existingUser>
    <label>Username</label> <select class="form-control select2"
        style="width: 100%;" name="user">
        <option ng-repeat="user in users" value="{{user.username}}">
        {{user.username}}</option>
    </select>
</div>

我假设您正在服务器上渲染 HTML。可能没有办法让它只重新渲染该元素。但是，您可以通过不同的方法执行此操作：

首先，您可以开始使用客户端MVC/渲染，如Angular.js。这样，您可以在添加新字段时自动刷新选择字段。

第二，您可以在不使用 MVC 系统的情况下将新选项放入选择字段中。这需要将数据与视图分离，所以我不建议这样做。但是，您可以让提交按钮执行 ajax 调用以确保服务器正确响应，并且仅在服务器响应到达时才添加新选项。您的代码如下所示：

$.ajax(url).done(function(){
    $('#my-select').append('<option>').html('your data')
}).fail(function(){
    // show error message...
});
相关文章：