如何在jquery AJAX響應中的checkbox中附加值

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元素將此行添加到第1個ajax響應的末尾htmlString

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

並在下面的第二個ajax響應中使用它

$（ '復選框容器'）追加（2nd_Response_htmlStingr）。

認為這可能有助於您獲得一個想法

Answer 2

你有沒有嘗試過.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>');
    }

});

這是我自己的一個例子，希望你能從中得到一些東西。

如果您需要進一步澄清，請留言

Answer 3

將上面的代碼放在第二個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); 

正確的代碼：

 $(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); } }); }); 

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

Answer 4

我在我的機器上運行你的代碼我得到你的ajax直接轉到錯誤功能而不是成功部分。 首先你的api沒有返回任何類型的json，你試圖通過定義contentType json在json中獲得響應，這就是為什么你的ajax直接轉向錯誤函數。 var response和var result1是硬編碼的json，你不是應該來自ajax調用的響應。

還有一個關於url的問題我得到了控制台。

跨源請求已阻止：同源策略不允許在http://www.example.com/api/get/properties/586caa3505dd7b13789e02a8上讀取遠程資源。 這可以通過將資源移動到同一域或啟用CORS來解決。