从AJAX响应动态创建复选框

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

<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"]

来源

2014-11-01 Tastybrownies

你能告诉我们'response'的内容？ – 2014-11-01 18:45:53

下面是一个例子，你可以在你的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>

来源

2014-11-01 19:04:10

感谢您的详细回复和代码示例，这就是我一直在寻找的。我会尽快尝试并报告，再次感谢。 – Tastybrownies 2014-11-01 20:47:13

您的回复帮助我了解该做什么以及该链接是否充满了最终细节，并且是多种基础知识的绝佳示例。 https://gist.github.com/zuch/3720842 – Tastybrownies 2014-11-02 22:18:23

很高兴听到它，并感谢您的反馈！ – 2014-11-02 22:23:24

这可以通过使用ngRepeat从AngularJS做到最好： https://docs.angularjs.org/api/ng/directive/ngRepeat

如果包含在您的项目，我希望它会降低代码逻辑的20-30％，你要搜索为或有这样的问题。

对于这里进一步的细节是链接： https://angularjs.org/

最后你还有其他的选择太多，但我只是想与大家分享在JS最聪明的框架。

快乐编码！
:)

来源

2014-11-01 18:50:59

从AJAX响应动态创建复选框

回答

相关问题