從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響應動態創建複選框

回答

相關問題