[英]Array from api response without true and false attributes received to dynamically create checkboxes in React
[英]Dynamically Create Checkboxes from AJAX Response
我正在创建一个涉及引导程序的网站,并希望在模式对话框中显示复选框列表(计算机名称)供用户选择。 我有一个AJAX呼叫和响应,正在返回我想要的信息,但是我不知道如何正确显示它。 基本上,我收到的返回列表中的每个项目,我都想在模态中显示的列表上附加一个复选框。 我之前已经做过类似的事情,觉得自己已经接近了,但不太了解如何完成此操作。 如果有人能教我如何做到这一点我会非常感激! 我的javascript / html代码位于我的JSP页面下面。 如果不清楚或者我需要更多信息,请告诉我。 非常感谢你!!!
<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中最聪明的框架。
快乐的编码!
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.