从AJAX响应动态创建复选框

Dynamically Create Checkboxes from AJAX Response

本文关键字：创建 复选框 动态 响应 AJAX      更新时间：2023-09-26

我正在创建一个涉及引导的网站，并希望在模式对话框中显示复选框（计算机名称）列表，供用户选择。我有一个AJAX调用和响应，它正在返回我想要的信息，但我不知道如何正确显示它。基本上，我收到的返回列表中的每个项目，我都想在模态中显示的列表中添加一个复选框。我以前也做过类似的事情，感觉自己很接近，但不太明白如何才能做到这一点。如果有人能教我怎么做，我将不胜感激！下面是我的JSP页面上的javascript/html代码。如果这还不清楚，或者需要我提供更多信息，请告诉我。非常感谢！！！

    <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Workstations</h4>
        </div>
        <div class="modal-body">
          <ul id="wkslist"></ul>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Cancel</a>
          <a href="#" class="btn btn-primary">Done</a>
        </div>
      </div>
    </div>
</div>
    </form>
</div>

以下是我对AJAX调用返回的响应使用的javascript代码。

    function getWorkstations(e)
{
    var branchName = $('#txtBranch').val();

  if(e.checked)
      {
      $.ajax({
          url : 'ajaxwks.html',
          type: 'POST',
          data: branchName,
          cache:false,
          beforeSend: function(xhr) {

              xhr.setRequestHeader("Content-Type", "text/plain");
          },
          success : function(response) 
          {
             alert(response);
             $.each(response, function(key, value){

                 $('#wkslist').append($("<input type='checkbox' name=" + key + "").text(value) + "<br>");
             });
          },
          error:function(jqXhr, textStatus, errorThrown){
              alert(textStatus);
          }
      });
      //ajax call for workstations.
         $('#myModal').modal('show');
      }
}

这是我在javascript中执行警报时弹出消息框时返回的内容片段。

["10.117.181.101:NOVELL:001:7637:C",hb:NOVELL:001:7637:C","WD08900960051","WD08900960052","WD08900960056"]

下面是您可以在success函数中使用什么来实现这一点的示例。

对您所做的更改包括将每个复选框包装在<li>中，并为其添加相应的<label>

// sample of response from server
var response = { optionA: 'One', optionB: 'Two', optionC: 'Three' };
// this would go in your ajax success handler
$.each(response, function (key, value) {
    var li = $('<li><input type="checkbox" name="' + key + '" id="' + key + '"/>' +
               '<label for="' + key + '"></label></li>');
    li.find('label').text(value);
    $('#wkslist').append(li);
});
#wkslist {
    list-style-type: none;
    padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wkslist"></ul>

这可以通过使用AngularJS中的ngRepeat来实现：https://docs.angularjs.org/api/ng/directive/ngRepeat

如果你把它包含在你的项目中，我希望它能降低你正在搜索或遇到类似问题的代码逻辑的20-30%。

有关更多详细信息，请访问以下链接：https://angularjs.org/

最后你也有其他选择，但我只是想和你分享JS中最聪明的框架。

编码快乐
：）

相关文章：