Question

我使用django创建了一个模型公司，其中包含名称和地址，仅显示查询集中所有公司的名称。我想要jquery做的是在点击名称时显示相应的地址（通过ajax）。

以下是我的代码。所以ajax请求正在被正确处理并且能够显示相应的地址，但是每次<ul class="address_result">显示相同的东西，这是有道理的，因为我将html(data)添加到类中，因此它的所有元素。有没有办法分别为每个<div class="name_address">中的每个名称显示地址，也许可以添加ID？提前谢谢！

JQuery的：

$(function(){
    $('.name').on('click', function(){
        $.ajax({
            type: "POST",
            url: "/#link to backend get_address function/",
            data:{
                'name': $(this).html(),
                'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()
            },
            success: get_address_success,
            datatype:'html'
        });
    });

});

function get_address_success(data, textStatus,jqXHR){
    $('.address_result').html(data);
}

HTML：

{% for obj in list %}
<div class="name_address">
    <h4 class="name">{{ obj.name }}</h4>
    <ul class="address_result"></ul>
</div>
{% endfor%}

django中的

get_address函数：

def get_address(request):
if request.method == "POST":
    company_name = request.POST.get('name','')
else:
    company name = ''
companies = company.objects.filter(name=company_name) #Name different companies can have the same name in this case
context = {
    'companies':companies
}
return render_to_response('ajax_get_address.html', context) #ajax_get_address.html just returns all companies' addresses that correspond to the name

SOLUTION：

$(function(){
    $('.name').on('click', function(){
        var Name=$(this).html();
        $.ajax({
            type: "POST",
            url: "/#link to backend get_address function/",
            data:{
                'name': Name,
                'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()
            },
            success: get_address_success,
            datatype:'html'
        });
        function get_address_success(data, textStatus,jqXHR)
        {
            $("#"+Name).html(data);
        }
    });

});




{% for obj in list %}
<div>
    <h4 class="name">{{ obj.name }}</h4>
    <ul class="address_result" id="{{obj.name}}"></ul>
</div>
{% endfor%}

Answer 1

是的，你可以对你的html生成做类似的事情

<div id="{{ obj.name }}" class="name_address">

然后使用该ID作为您从后端发送的响应的一部分来选择个人address_result。像你这样存在的json 数据会做什么

{"name" : "name_of_block_to_change",
 "content" : data}

你的成功回调可以做到这一点

function get_address_success(data, textStatus,jqXHR){
     var id = data["name"];
     $('#'+id+' .address_result').html(data["content"]);
}

Answer 2

尝试使用id的属性，将id发送到ajax，获取地址并将其添加到下一个address_result ul：

{% for obj in list %}
<div class="name_address">
    <h4 class="name" data-id="{{obj.id}}">{{ obj.name }}</h4>
    <ul class="address_result"></ul>
</div>
{% endfor%}

JS：

$(function(){
    $('.name').on('click', function(){
        var el = $(this);
        $.ajax({
            type: "POST",
            url: "/#link to backend get_address function/",
            data:{
                'name': el.html(),
                'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val(),
                'id':el.attr('data-id');
            },
            success: get_address_success,
            datatype:'html'
        });
    });

});

function get_address_success(data, textStatus,jqXHR){
    $(el).next('.address_result').html(data);
}

get_address函数：

def get_address(request):
if request.method == "POST":
    company_name = request.POST.get('name','')
    company_id = request.POST.get('id','')
else:
    company name = ''
companies = company.objects.filter(name=company_name).filter(id=company_id) 
context = {
    'companies':companies
}
return render_to_response('ajax_get_address.html', context) #ajax_get_address.html just returns all companies' addresses that correspond to the name & id

如何使用JQuery分别向具有相同类的元素添加不同的内容

2 个答案: