0

AJAX関数の書き方を理解しようとしていますが、頭に浮かぶチュートリアルを見つけることができませんでした。

私のHTMLは次のとおりです。

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

ユーザーが「支払い」をクリックすると、次のdjangoがAJAXを介して実行されます。

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

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 に答える
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>

JQuery：

$("#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イベントハンドラーの直後に設定する$(this)ことで、関数による上書きの問題を回避post()し、ajaxURLをリンクに保存できるようになります。これはうまく機能しないブラウザにとっては問題になる可能性がありますが、次のようないくつかのリンクに同じ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：

                        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 に答える