如何在jquery AJAX响应

时间：2017-01-05 03:38:53

标签： javascript jquery ajax

这里我使用了两个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-->

4 个答案:

答案 0 :(得分：0)

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

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

的末尾 
<div class='check-box-container'></div>

并将其用于第二个ajax响应中，如下所述

$（ '复选框容器。'）附加（2nd_Response_htmlStingr）;

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

答案 1 :(得分：0)

你有没有尝试过.append功能有时它会帮助

这是我如何实现追加

的一个例子 
function editLeavePolicyDetails(id) {


var removeLeaveTypeDetails=0;

$.ajax({
    url: '/ajax-leave-policy/' + id,
    data: {
        format: 'json'
    },
    dataType: 'json',

    type: 'GET',
    success: function (data) {
        console.log('loadedData',data);
        //console.log(data[2][0][0]);

        //$('.field.validation-error').empty();
        //$('.error').text('');

        //loadingPolicyDetails();


        $('#leavePolicyEditModal').on('hidden.bs.modal', function ()
        {
            $(this).find("textarea,select").val('').end();

            validator.resetForm();

            //hide();

            //deleting loaded details


            console.log(leaveTypeCount);
            while (removeLeaveTypeDetails > 0) {
                $('#editLeaveType'+ (removeLeaveTypeDetails-1)).remove();
                $('#editNoOfDays'+ (removeLeaveTypeDetails-1)).remove();
                //$('#space'+ (No-1)).remove();
                removeLeaveTypeDetails--;
            }


        });

        leaveTypeCount = data[4];
        console.log('leaveTypeCount',leaveTypeCount);
        var x;

        $('#Tid0').val(id);
        $('#Tid2').val(data[3][0]);

        //loading details

        for (x = 0; x < leaveTypeCount; x++) {

            var type = data[2][x][0];
            var days = data[1][x][0];


            var $cloneTypeID = $('<input />', {
                'id': 'editLeaveType' + x,
                'value': type,
                //'class':'col-sm-6 left',
                'name': 'Leave_Type' + x,
                'required': "enter",
                'disabled':true

            });

            var $space = $('</br>', {
                'id':'space'+x
            });

            var $cloneDaysID = $('<input />', {
                'id': 'editNoOfDays' + x,
                'value': days,
                //'class':'col-sm-6 right',
                'name': 'No_of_Days' + x


            });

            $('#xx').append($cloneTypeID);
            document.getElementById("#xx").disabled = true;
            $('#xx1').append($cloneDaysID);


        }
        removeLeaveTypeDetails=leaveTypeCount;

        console.log('removeLeaveTypeDetails',removeLeaveTypeDetails);

        $("#leavePolicyEditModal").modal('show');


    },
    error: function () {
        $('#info').html('<p>An error has occurred</p>');
    }

});

这是我自己的一个例子，希望你可以从中得到一些东西。

如果您需要进一步澄清，请点击

答案 2 :(得分：0)

将上面的代码放在第二个ajax成功方法中：

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').html(htmlString);

正确代码：

＆＃13;
＆＃13; 
$(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;
				});
			//==========================================================
			//start - code in here
			//==========================================================

			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').html(htmlString); 
			//========================================================
			//end - code in here
			//========================================================
			},
			error: function (errMsg) {
				console.log(errMsg);
			}
		});  
	  
	 
	  
	
	 
	},
	error: function (errMsg) {
		console.log(errMsg);
	}
});
});
＆＃13; 
<!-- POST PROPERTY EDIT-->
<div class="post_property_edit"></div>
<!-- POST PROPERTY EDIT-->
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我在我的机器上运行你的代码我得到你的ajax直接转到错误功能而不是成功部分。 首先你的api没有返回任何类型的json，你试图通过定义contentType json来获得json中的响应，这就是你的ajax直接转向错误函数的原因。 var response 和 var result1 是硬编码的json，你不是应该来自ajax调用的响应。

还有一个关于url的问题我进入了控制台。

阻止跨源请求：同源策略禁止在http://www.example.com/api/get/properties/586caa3505dd7b13789e02a8读取远程资源。这可以通过将资源移动到同一域或启用CORS来解决。

相关问题
最新问题