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')