-1

初心者の質問でご容赦ください。これは単純な ajax コードです。ボタンをクリックして、サーバー上の画像を削除します。しかし、Firebug>Net>XHR では、このリクエストが表示されません。

PS: ページの更新を防ぐために、削除ボタンのタイプを「送信」ではなく「ボタン」に設定しましたが、それは正しい方法ですか?

$('.delete').on('click', function() {
    var currentpath = window.location.pathname;
    var path = currentpath + '/delete';
    var csrftoken = $.cookie('csrftoken');
    var data = {};
    data['csrfmiddlewaretoken'] = csrftoken;
    data ['filename'] = $('.image-input').val();

    $.ajax({
        url: path,
        type: 'POST',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            $('button.delete').css('visibility', 'hidden');
        }
    });
});


編集: 削除ボタンのコード 

<button type='button' class='delete first'>&#x274C</button>


EDIT2: コードの意図

必要なのは、ファイル名の文字列をサーバーに渡すことだけです。これにより、サーバーはその文字列で画像をクエリし、その画像を削除できます。また、ページを更新したくありません。

4

4 に答える 4

1 
$(function(){
$('.delete').on('click', function() {
    //var currentpath = window.location.pathname;
    var path = 'delete';
    var csrftoken = $.cookie('csrftoken');
    var data = {};
    data['csrfmiddlewaretoken'] = csrftoken;
    data ['filename'] = $('.image-input').val();

    $.ajax({
        url: path,
        type: 'POST',
        data: data,
        cache: false,
        //contentType: false,
        //processData: false,
        success: function(data){
            alert('success');
            $('.delete').css('visibility', 'hidden');
        }
    });
});
});
于 2013-05-28T09:44:24.577 に答える
0

これを試して：

$('.delete').on('click', function(e) {

    e.preventDefault();
    var currentpath = window.location.pathname;
    var path = currentpath + '/delete';
    var csrftoken = $.cookie('csrftoken');
    var filename = $('.image-input').val();
    var data = JSON.stringify({ csrfmiddlewaretoken: csrftoken, filename: filename }),

    $.ajax({
        url: path,
        type: 'POST',
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        success: function(data){
            $('button.delete').css('visibility', 'hidden');
        }
    });
});
于 2013-05-28T09:43:47.193 に答える
0

エラーコールバック関数を定義するのも良いでしょう。Google chrome の inspect 要素といくつかのブレークポイントを使用してデバッグしてみませんか?

$(".delete").click(function(){
    var currentpath = window.location.protocol+"//"+window.location.host;
    var path = currentpath + '/delete';
    var csrftoken = $.cookie('csrftoken');
    var data = new Object();
    data['csrfmiddlewaretoken'] = csrftoken;
    data ['filename'] = $('.image-input').val();

    $.ajax({
        url: path,
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function(data){
            $('button.delete').css('visibility', 'hidden');
        }
    });
});
于 2013-05-28T09:45:35.813 に答える