0

我正在尝试弄清楚如何编写 AJAX 函数，但找不到一个不在我脑海中的教程。

我的 HTML 是：

<a href="{% url pay_provider id=statement.statement_id %}" id="pay_provider">Pay</a>

当用户单击“支付”时，将通过 AJAX 执行以下 django：

def pay_provider(request, statement_id):
    FinancialStatements.objects.get(statement_id=statement_id).update(paid=1)
    return redirect(...)

为了在最基本的层面上做到这一点，必要的 url.py、views.py 和 js 是什么？

4

3 回答 3

0

好吧，你有几个问题：

  1. 你没有任何ajax。
  2. 你没有任何jquery。
  3. 据我所知，您正在使用一个a元素来触发一个 ajax 事件。这不是一个可怕的想法，但它有你可能想要避免的开销。

最后，我href是否正确阅读了您的内容，因为您将其设置为返回 ajax 响应的脚本？或者您是否试图获取它，以便当他们点击链接时，它会将他们带到一个新页面，同时发送一个 ajax 请求？

如果是后者，我会避免它。如果是 ajax 响应者的 URL，试试这个：

HTML/Python：

<a href="{% url pay_provider id=statement.statement_id %}" id="pay_provider">Pay</a>

查询：

$("#pay_provider").on("click" function(e) {
    e.preventDefault();  // Prevent browser from following link.
    post_url = $("this").attr("href");
    $.post(post_url, function(data) {
         // do whatever with the returned data.
    });
});

通过post_url在事件处理程序之后设置 right，它可以避免$(this)被post()函数覆盖的问题，并允许您将 ajax URL 存储在链接中。虽然这对于表现不佳的浏览器来说可能是一个问题，但它确实提供了为多个此类链接重用相同 ajax 函数的好处，例如：

<a href="{% url pay_provider id=statement.statement_id %}" 
class="provider_action">Pay</a>
<a href="{% url save_provider id=statement.statement_id %}" 
class="provider_action">Save</a>
<a href="{% url cancel_provider id=statement.statement_id %}" 
class="provider_action">Cancel</a>

现在你可以这样做：

$(".provider_action").on("click" function(e) {
   e.preventDefault();  // Prevent browser from following link.
    post_url = $("this").attr("href");
    $.post(post_url, function(data) {
         // do whatever with the returned data.
    });
});

这将适用于所有 3 个“动作”链接，但会触发他们自己的动作脚本。

于 2012-04-18T01:04:35.060 回答
0

这是我能想到的最基本的例子。它涵盖了添加/删除功能：

HTML：

<select name="test_add" id="test_add">
    {% for position in all_positions %}
    <option value="{{ position.id }}">{{ position }}</option>
    {% endfor %}
</select>

{% for position in user_positions %}
    <span id="positions">
        {{ position }}
        <input type="hidden" class="position_id" value="{{ position.id }}">
        <a class="delete-position" href="#;">X</a>
    </span>
{% endfor %}

网址：

                        url(r'^ajax_test_delete/$',
                            'ajax_test_delete',
                            name='ajax_test_delete'),

                        url(r'^ajax_test_add/$',
                            'ajax_test_add',
                            name='ajax_test_add'),

                        url(r'^ajax_test_page/$',
                            'ajax_test_page',
                            name='ajax_test_page'),

意见：

def ajax_test_page(request):
    profile = request.user.get_profile()
    all_positions = Position.objects.all_with_gender().filter(id__lt=50).order_by('position')
    user_positions = profile.positions.order_by('positiontimestamp__timestamp')
    return render(request, 'videos/ajax_test_page.html', {'user_positions': user_positions, 'all_positions': all_positions})

def ajax_test_delete(request):
    position_id = int(request.POST['position_id'])
    position = Position.objects.get(id=position_id)
    profile = request.user.get_profile
    PositionTimestamp.objects.get(profile=profile, position=position).delete()
    return HttpResponse()

def ajax_test_add(request):
    position_id = int(request.POST['position_id'])
    position = Position.objects.get(id=position_id)
    profile = request.user.get_profile()
    add_new = PositionTimestamp(profile=profile, position=position)
    add_new.save()
    return HttpResponse()

JS：

// TEST AJAX //
$("a.delete-position").live('click', function(){
   // use named variables in the outer function -- $(this) refers to the response in the inner function
   var span = $(this).parent();
   var position_id = $(this).siblings('input.position_id').val();
   $.post('/ajax_test_delete/', {'position_id': position_id}, function(response) {
       span.remove();       
   });
});

$("#test_add").change(function(){
    var position_id = $(this).find('option:selected').val();
    $.post('/ajax_test_add/', {'position_id': position_id}, function(response) {
        var position_name = $("#test_add option:selected").text();
        var span = $('<span>' + position_name + '</span>');
        span.append($('<input type="hidden" class="position_id" value="' + position_id + '">' ));
        span.append($('<a class="delete-position" href="#;">X</a>'));
        $('#positions').append($(span));   
    });
});
于 2012-04-18T21:14:08.990 回答
0

通过将 href 设置为该 URL，浏览器将同步向该 URL 发出请求。您可以使用 jQuery 来使用链接的单击事件来发出 ajax 请求。

$(function() {
    $('#pay_provider').click(function(e) {
        e.preventDefault();
        $.post('{% url pay_provider id=statement.statement_id %}', function() {
            // alert('ajax call complete');
        });
    });
});
于 2012-04-18T01:00:25.360 回答