javascript - 如何在 jquery AJAX 响应中附加复选框中的值

Question

这里我使用了两个ajax，两个ajax都根据我想要在表单字段中附加值的成功消息返回成功响应，例如响应和结果，从这里开始第一个ajax工作正常，但第二个ajax响应我无法在复选框中附加值我正在尝试这样，但我没有得到任何东西(复选框未附加)

$(document).ready(function(){
$.ajax({
	url: 'http://www.example.com/api/get/properties/586caa3505dd7b13789e02a8', 
	type: 'GET',
	contentType: 'application/json; charset=utf-8',
	success: function (data) {
		
		 var htmlString='';
		 
		 var response = {"name":"3 BHK APARTMENT FOR SALE","email":"abcd@gmail.com"}
	 
		  htmlString+='<form class="form-horizontal" id="post_property_edit_form"><div class="row">';
		  htmlString+='<div class="row"><div class="col-md-4"><h4><a style="color:#325d88;;text-decoration:none;">Property Details</a></h4></div></div>';
		  htmlString+='<div class="row"><div class="col-md-1"></div><div class="col-md-4"><div class="form-group"><label class="control-label" for="name" style="font-weight: bold;">Name:</label><input type="name" class="form-control align2" id="name" placeholder="Enter Name" style="" value="'+response.name+'"></div></div><div class="col-md-2"></div><div class="col-md-4"><div class="form-group"><label class="control-label" for="email">Email Address:</label><input type="email" class="form-control align2" id="email" placeholder="Enter Email Address" style="" value="'+response.email+'" readonly=""></div></div><div class="col-md-1"></div></div>';
	 
	  
		  $.ajax({
			//headers: {"Authorization": "Bearer "+token},
			url: 'http://www.example.com/api/get/property-types', 
			type: 'GET',
			contentType: 'application/json; charset=utf-8',
			success: function (result) {
				console.log(result);	
				var result1 = [ {
					  "id" : "57fde39205dd7b0ef89e02e3",
					  "name" : "Apartment",
					  "propertyPurpose" : {
						"id" : "57cfe071fb47b70f3b147c66",
						"name" : "RESIDENTIAL",
						"description" : "Residential purpose"
					  },
					  "description" : "Residential Property Type"
					}, {
					  "id" : "57fde3aa05dd7b0ef89e02e4",
					  "name" : "Villament",
					  "propertyPurpose" : {
						"id" : "57cfe071fb47b70f3b147c66",
						"name" : "RESIDENTIAL",
						"description" : "Residential purpose"
					  },
					  "description" : "Residential Property Type"
					}
					]
				 $.each( result1, function( key, p_typevalue ) {
					
				 htmlString+='<input type="checkbox" value="'+p_typevalue.name+'" id="property_typsdfsde" >'+p_typevalue.name;
				});
				
			},
			error: function (errMsg) {
				console.log(errMsg);
			}
		});  
	  
	  //htmlString+='<input type="checkbox" name="dssd" id="property_typsdfsde" >ddsfsdfsdf';
	  
	
	  htmlString+='<div class="row" style="margin-top:50px;"><p style="text-align:center;"><button type="button" class="btn btn-success" style="padding-top: 6px; padding-bottom: 6px;width:100px;border-radius: 0px;">Submit</button></p></div></div></form>'; 
	
	$('.post_property_edit').empty().append(htmlString); 
	},
	error: function (errMsg) {
		console.log(errMsg);
	}
});
});

<!-- POST PROPERTY EDIT-->
<div class="post_property_edit"></div>
<!-- POST PROPERTY EDIT-->

Answer 1

您可以在第一个ajax响应中创建一个div元素作为容器，并在第二个ajax请求中使用它

会说我们正在使用“check-box-container”类创建 div 元素将此行添加到第一个 ajax 响应 htmlString 的末尾

<div class='check-box-container'></div>

并在第二个ajax响应中使用它，如下所示

$('.check-box-container').append(2nd_Response_htmlStingr);

认为这可能会帮助您获得想法