Django使用jquery POST數據

Question

我設計一個應用程序，你有連接和掛起的連接請求列表加載在頁面的一側。我遇到的問題是編寫一個jQuery函數來接受請求並刷新頁面上的div框。我無法弄清楚如何將連接請求的id傳遞給我的jquery函數，然後該函數會將該id傳遞給我的視圖以處理相關對象。

這裏是我的JS代碼：

function accept(id) { 
    $.post("/accept/", function(json){ 
    alert("Was successful?: " + json['success']); 
}); 

function addClickHandlers() { 
    $("#accept").click(function() { accept(id) }); 
} 
$(document).ready(accept); 

這裏是我試圖讓調用JS的HTML：

 <table class="table table-condensed" style="margin-top:10px;"> 
    <tbody> 
     {% for request in conReqs %} 
     <tr> 
     <td> 
      <a href="#"><img src="{{ MEDIA_URL }}{{ request.creator.username }}<a onclick="accept({{ request.id }});">Accept</a> &middot; <i class="icon-thumbs-down"></i> <a href="#">Hide</a></p> 
     </td> 
     </tr> 
     {% endfor %} 
    </tbody> 
    </table> 

當我點擊接受沒有任何反應。

Answer 1

您不需要onlick屬性，只需用jQuery不顯眼地附加事件處理函數即可。你也不應該嵌套<a>標籤。

function accept(id) { 

    $.post("/accept/", function (json) { 

    alert("Was successful?: " + json[ 'success' ]); 

    }); 

} 


function addClickHandlers() { 

    $(".accept").on('click', function (event) { 

    event.preventDefault(); 

    accept(/\d+$/.exec(event.target.id)[0]); 

    }); 

} 


$(document).ready(function() { 

    addClickHandlers(); 

    // If you really mean to call this at this point: 
    accept(); 

}); 


<table class="table table-condensed" style="margin-top:10px;"> 
    <tbody> 
    {% for request in conReqs %} 
    <tr> 
     <td> 
     <a href="#{{ request.id }}" class="accept"><img src="{{ MEDIA_URL }}{{ request.creator.username }}Accept</a> &middot; <i class="icon-thumbs-down"></i> <a href="#">Hide</a></p> 
     </td> 
    </tr> 
    {% endfor %} 
    </tbody> 
</table>  

事件處理

HTML：

<a href="" id="some-link">Some link</a> 

JS：

$(document).ready(function() { 

    // Select element(s). In this case, the one element with the ID 
    // "some-link". Call `on()` on the selected elements to register an 
    // event listener, in this case for the `click` event. The second 
    // argument to `on()` is the handler function, which will be called 
    // when the event occurs and will be passed a jQuery Event object. 

    $("#some-link").on('click', function (event) { 

    // This prevents the default action associated with the event on 
    // the target element. In the case of a click event on an 
    // `a[href]` element, the default action would be to load the URL 
    // that the `href` resolves to. 

    event.preventDefault(); 

    // One of the properties of the Event object is `target` -- the 
    // element that the event occured on. In this case the target will 
    // be an `a[href]` element, so I can read `event.target.href`. If 
    // the `a` element had nested elements, `event.target` could be 
    // the nested element. In that case, you could do 
    // `$(event.target).closest("a")` to make sure you get the `a` 
    // element that the event occured within. 

    // Here I'm running a regular expression on `event.target.href` to 
    // get a sequence of digits at the end. 

    var id = /\d+$/.exec(event.target.href)[0]; 

    }); 

}); 

對於用例在你的問題中，代碼可以降低冷凝成是這樣的：

$(document).ready(function() { 

    $(".accept").on('click', function (event) { 

    event.preventDefault(); 

    var id = /\d+$/.exec(event.target.href)[0]; 

    $.post("/accept/", { id : id }, function (json) { 

     // ... 

    }); 

    }); 

}); 

Answer 2

你實際上沒有發佈任何數據。在調試javascript時確保控制檯處於打開狀態，這將顯示所有語法錯誤和請求。學習如何調試代碼非常重要。自由地使用console.log來找出你的代碼的哪部分正在執行，哪些不執行。

您可以發佈數據傳遞的對象與數據的URL

var postData = {'id': id}; 
$.post("/accept/", postData, function(json){ 

在你的Django查看您可以通過

request.POST.get('id')