使用 Django 从 jQuery 调用函数无法正常工作

Question

我正在尝试创建一个根据用户条件搜索用户的页面。然后它通过 AJAX 响应将结果加载到不同的 DIV：

function search_friends() {
    $("#search-results").show();
    $("#loading1").show();
    var q = $("#id_q").val();
    var type = $("#id_search_type").val();
    $("#loading1").hide();
    $("#results").load("/search/friends/?ajax&q="+encodeURIComponent(q)+"&search_ty­pe="+encodeURIComponent(type));
    return false;
}

在这个新的结果 DIV 中，我为每个用户提供了可以将他们添加为朋友的链接。这个结果 DIV 中的每个链接都有一个每个用户 userID 的 ID 和一个 user_link 类。当登录的用户单击链接时，我希望它弹出一个确认框，然后通过 AJAX 发送请求。但是，我无法像我想要的那样通过 AJAX 提交链接。我的代码如下：

{% for u in users %}
<div id="results">
    <img src="{{ u.profile_pic }}" class="xsmall-pic" /> <a href="/{{ u.username }}/">{{ u.username }}</a><br />
    <span class="small-date">{{ u.get_full_name }}</span>
    <span class="floatR" id="user_{{ u.id }}_link"><a href="#" id="{{ u.id }}" class="user_link">Add as friend</a></span>
</div>{% endfor %}

<script type="text/javascript" language="javscript">
    $(document).ready(function() {
        var csrf_token = "{{ csrf_token }}";
        $(".user_link").bind('click',function() {
            request_friend($(this).id,csrf_token)
        });
        $("#search-friends-form").submit(search_friends);

    });
</script>

在一个外部 JavaScript 文件中，我有以下内容：

function confirm_request()

    return confirm("Are you sure you want to request this user as a friend?");
}

function request_friend(id,token)
    if (confirm_request())
    {
        var data1 = {to_friend: id,csrfmiddlewaretoken: token};
        $.post('/users/requests/friends/'+id+'/?ajax', 
                data1, function(json) {
                    $("#user_"+id+"_link").html(json.status);
                }, "json");
                return false;
    }
    else
    {
        return;
    }
}

感谢您的帮助，因为我对 Javascript 的了解并不那么好。

EDIT 通过 AJAX 调用的 Python 函数

def search_for_friends(request):
users = False
friends = False
return_page = 'users/friend_search.html'
ajax = 'ajax' in request.GET
try:
    if 'q' in request.GET:
        form = FriendSearchForm(request.GET)
        if form.is_valid():
            if form.cleaned_data['search_type'] == 'username':
                users = CustomUser.objects.exclude(pk=request.user.id).filter(username__icontains=form.cleaned_data['q'])
            elif form.cleaned_data['search_type'] == 'name':
                users = CustomUser.objects.filter(Q(first_name__icontains=form.cleaned_data['q']) | Q(last_name__icontains=form.cleaned_data['q']))
            elif form.cleaned_data['search_type'] == "email":
                users = CustomUser.objects.filter(email__icontains=form.cleaned_data['q'])
            else:
                pass
        else:
            pass
    else:
        form = FriendSearchForm()
    if users != False:
        users = users
        error = False
    if users == "":
        users = ""
        error = "No users match the search term provided"
    if ajax:
        show_results = True
        context = RequestContext(request,{'users':users,'form':form,'show_results':show_results})
        return render_to_response('users/friend_search_results.html',context_instance=context)
    context = RequestContext(request,{'users':users,'form':form,'error':error})
    return render_to_response(return_page,context_instance=context)
except:
    form = FriendSearchForm()
    context = RequestContext(request,{'form':form})
    return render_to_response(return_page,context_instance=context)

Answer 1

如果您不想在 AJAX 响应中包含 JavaScript，您可以让 .load() 的完成事件负责设置点击事件：

var url = "/search/friends/?ajax&q="+encodeURIComponent(q)+"&search_ty­pe="+encodeURIComponent(type);
$("#results").load(url, function() {
    var csrf_token = "{{ csrf_token }}";
    $(".user_link").bind('click',function() {
        request_friend($(this).id,csrf_token)
    });
});

Answer 2

如果我正确理解了您的问题，您是否希望确保点击处理程序适用于通过稍后的 AJAX 调用加载的链接？

在 jQuery 中，使用一次$('.user_link').live('click', function() {}) 处理程序将点击事件处理程序分配给所有当前和未来的链接。

Answer 3

除非您明确告诉 jQuery 对其进行评估，否则从您的 AJAX 调用返回的 Javascript 不会被评估。这是通过在 AJAX 调用中指定 dataType 来完成的，即 .load() doesn't support。

如this answer 所示，您应该使用jQuery.get() 或$.ajax 并指定您的数据类型：

$.ajax({
  type: "GET",
  url: "yourPage.htm",
  dataType: "html"
});