ajax 选择 HTML 的特定部分

Posted 2023-02-24

【中文标题】ajax 选择 HTML 的特定部分

【英文标题】：ajax selecting specific part of a HTML

【发布时间】：2021-09-26 21:11:05

【问题描述】：

我正在尝试使用 django AJAX 加载链接的下拉列表，其中下拉选项基于另一个字段的选择...我有多个需要链接的元素，所以我尝试链接多个 Ajax一个接一个地请求，我无法做到……现在我试图在单个 html 中引入不同选择字段的 ajax 响应，并根据 div 的 id 呈现 ajax 响应……你能不能让我知道我是否可以明确指定可以替换的数据（div）部分...谢谢！

AJAX 部分

store_dropdown_list_options.html：

<div id="div1">
    <option value="">---------</option>
    % for store in stores %
    <option value=" store.id "> store.StoreNM </option>
    % endfor %
</div>

观看次数：

def load_store(request):
    ReadingAreaNo_id = request.GET.get('ReadingArea')
    print('value is ', ReadingAreaNo_id)
    stores = StoreMaster.objects.filter(ReadingAreaNo_id=ReadingAreaNo_id).order_by('StoreNO')
    print('stores are ', stores)
    return render(request, 'rateshare/store_dropdown_list_options.html', 'stores': stores)

网址：

path('ajax/load-stores/', views.load_store, name='ajax_load_stores'), 

脚本：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $("#id_ReadingAreaNo").change(function () 
    var url = $("#personForm").attr("data-cities-url");   
    var ReadingAreaNo = $(this).val();      
        $.ajax(                       
            url: url,                    
            data: 
                'ReadingArea': ReadingAreaNo       
            ,
            success: function (data)    
                $("#id_StoreNO").html(data);  
                
            
        );
    );

</script>

在 ajax html 中将呈现不同的 div，因此我希望在 ajax 请求成功时仅替换 html 的特定部分...

编辑 1：控制台打印数据和数据类型

//类型

字符串

//数据

> 
> (index):311
> <option value="">---------</option>
> 
> <option value="1">Sangeeth &amp; CO</option>
> 
> <option value="2">ASTY Shizuoka</option>

【问题讨论】：

嗨，所以你的ajax响应会有很多div你只需要获取指定div的div html？

是的斯瓦蒂。想出了一个可行的解决方案，但我不确定效率或可靠性。将其添加为答案，如果您有任何其他方法，请告诉...

您好，您可以使用 .siblings() 而不是拆分，因为您有 html 字符串返回，这样应该可以工作。即：$(data).siblings("yourdivid").html()

会试试的！！非常感谢！

【参考方案1】：

<script>
    $("#id_ReadingAreaNo").change(function () 
        //pass div id as a parameter
        dynamicAjax("id_StoreNO");
    );

//Use that parameter to replace the HTML value based on ajax
function dynamicAjax(storeId)
    var url = $("#personForm").attr("data-cities-url");   
    var ReadingAreaNo = $(this).val();      
        $.ajax(                       
            url: url,                    
            data: 
                'ReadingArea': ReadingAreaNo       
            ,
            success: function (data)  
                //dynamic HTML replacement based on the id  
                $("#"+storeId).html(data);  
                
            
        );
    
</script>

【讨论】：

感谢马杜的回答...我相信这会动态插入数据。我正在寻找的是，就像您将数据插入到商店 id 一样，我希望将 ajax 响应（数据）中的某个 div 传递到商店 id...

【参考方案2】：

我用一个字符（这里是*）分割HTML中的每个DIV，然后使用javascript split()根据分割字符分割ajax响应的div。然后根据拆分后的索引将所需的div作为ajax响应传递...

AJAX 部分

store_dropdown_list_options.html：

<div id="div1">
    <option value="">---------</option>
    % for store in stores %
    <option value=" store.id "> store.StoreNM </option>
    % endfor %
</div>*
<div id="div2">
    <option value="">---------</option>
    % for meter in meters %
    <option value=" meter.id "> meter.MeterNo </option>
    % endfor %
</div>

脚本：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

    $("#id_ReadingAreaNo").change(function () 
    var url = $("#personForm").attr("data-cities-url");  
    var ReadingAreaNo = $(this).val();  
    var MeterKBN = $("#id_MeterKBN").val()
    
        $.ajax(                       
            url: url,                    
            data: 
                'ReadingArea': ReadingAreaNo ,       
                'MeterKBN' : MeterKBN
            ,
            success: function (data)    
                var test1 = data.split('*');
                $("#id_StoreNO").html(test1[0]);  
                $("#id_MeterID").html(test1[1]);
            
        );
    );