JQuery:将HTML添加到父分区作为AJAX的结果

JQuery: Add HTML to Parent Div as Result of AJAX

本文关键字：AJAX 结果 分区 HTML 添加 JQuery      更新时间：2023-09-26

我不太明白如何将从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中放置一个大的"未定义"，而不是响应。

哦，如果有人能解释为什么我必须把.after（）中的代码拼凑在一起，浏览器才能理解它，那就加分了。我查看了以前的线程，看到了带有"''"的转义行，但这似乎不起作用。

问题是selectListAjax（）没有返回值。对结果响应的所有处理都应该在ajax调用的success（）处理程序中，因为ajax调用（根据定义）是异步的。请注意，该方法也可能在success（）处理程序完成之前返回。

从小处着手。

Try（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");
        }
    });

当您调用selectListAJAX:时

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

selectajax是一个变量，您可以在ajax的成功中使用它作为选择器。如果你想通过选择器，它需要像这样的字符串：

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

正如Keith所说："所有对结果响应的处理都应该在success（）处理程序中…"这是正确的。然而，也出现了一个问题，当创建另一个选择框时，所有现有的选择框也会被重新创建，因为我要求jQuery用一类"select"AJAX替换everydiv中的HTML。

为了将列表仅添加到新创建的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。

相关文章：