jQuery：將HTML添加到父Div作為AJAX的結果

Question

我不太清楚如何將從AJAX調用檢索的HTML添加到PHP函數。

首先，這是AJAX函數：

function selectListAJAX(fieldId, newclass){
    $.ajax({
        url: "http://brand.emich.edu/forms-and-tools/sections/departmental/university-archives/monthly/ajax-selectbox.php",
        type: "POST",
        data: { field_id: fieldId },
        success: function(response){
           $(newclass).html(response);
        },
        error: function(){
           alert("Error");
        }
    });
}

這是應該添加HTML的地方：

$(this).parent().parent().after('
    <div class="form-group '+ field_name +'-row row">
        <div class="col-sm-6">
            <input type="text" name="'+ field_name +'[]" class="form-control item-field">
        </div>
        <div class="col-sm-3 selectajax">'+ 
            selectListAJAX(newFieldId, selectajax) +'
        </div>
        <div class="col-sm-3 add-field">
            <input type="number" name="'+ field_name +'qty[]" class="form-control align-right ' + field_name + 'qty">
        </div>
    </div>
');

我嘗試了向函數等添加參數的幾種變體，但是我能想到的最好的辦法是在div而不是響應中放置一個大的“ undefined”。

哦，如果有人可以解釋為什么我必須將我的.after（）中的代碼全部粉碎在一起，以使瀏覽器理解它，則可以加分。 我查看了以前的線程，並看到用'\\'轉義行，但這似乎行不通。

Answer 1

問題是selectListAjax（）不返回值。 對結果響應的所有處理都應在ajax調用的success（）處理程序內，因為ajax調用（根據定義）是異步的。 請注意，該方法還可能在您的success（）處理函數完成之前返回。

從小開始。

試試（html）：

<div>
    <div class="target"></div>
</div>

（腳本）：

$.ajax({
        url: "http://brand.emich.edu/forms-and-tools/sections/departmental/university-archives/monthly/ajax-selectbox.php",
        type: "POST",
        data: { field_id: fieldId },
        success: function(response){
           $('.target').html(response);
        },
        error: function(){
           alert("Error");
        }
    });

Answer 2

當您調用selectListAJAX時：

<div class="col-sm-3 selectajax">'+ 
   selectListAJAX(newFieldId, selectajax) +'
</div>

selectajax是一個變量，您可以將其用作ajax成功的選擇器。 如果要傳遞選擇器，則需要使用如下字符串：

<div class="col-sm-3 selectajax">'+ 
   selectListAJAX(newFieldId, + 'selectajax' +) +'
</div>

Answer 3

正如Keith所提到的：“結果響應的所有處理都應在success（）處理程序內進行……”這是正確的。 但是，還會出現一個問題，當創建另一個選擇框時，也會重新創建所有現有的選擇框，因為我要求jQuery將每個 div中的HTML替換為“選擇” AJAX類。

為了將列表僅添加到新創建的div中 ，還必須為該div動態創建一個ID：

      success: function(response){
            var numberOfLists = $('.'+fieldName+'selectajax').length;

            $('.'+fieldName+'selectajax').each(function(index, element) {
                if(index == numberOfLists -1){
                    var idOfLast = $(this).attr('id', 'currentselectajax');
                    $(idOfLast).html(response);
                } else {
                    $(this).removeAttr('id');
                }
            });
     },

首先，收集數組的長度（給定類的div數存在）。 然后，為每一個找到最后一個（長度為1）。 對於最后一個，為其創建一個ID，然后使用.html（response）將響應轉儲到其中。 對於其他所有屬性，請刪除ID屬性，以繞過這些div中的HTML更改。