Question

我正在使用Ajax（以及Django）对按钮点击执行某些操作。在我进入视图之前，我无法将数据传递给javascript函数。出了什么问题？如何将按钮的ID数据传递给该功能？我收到的消息是request_data未定义。

template.html

<button class="btn-green" onclick="request_access()" id="{{ data }}">Join Group</button>

javascript.js

function request_access(){
    console.log("button clicked");
    var request_data = $(this).attr('id');
    console.log("data: " + request_data);
    $.post({
        url: "request_access/",
        data : { request_data: request_data},
        success : function(json) {
            $("#request-access").hide();
            console.log("requested access complete");
        }
    })
}

Answer 1

$.post 的语法不正确，也传递(i+j)++处理程序中的this实例。函数onclick内部指的是窗口对象而不是单击的DOM元素。

<强> HTML

this

<强>的jQuery

<button class="btn-green" onclick="request_access(this)" id="{{ data }}">Join Group</button>

Answer 2

这是窗口对象。不要在html标签中使用eventhandler。这是一个原因。拆分你的javascript代码和你的html结构。

如果你不能这样做：使用window.event来检测事件所有者。

Answer 3

使用jquery绑定onclick事件，如下所示：

jQuery(function($){
    $('.btn-green').on('click', function(e) {
          var request_data = $(this).attr('id');
          $.post .......
          .....
    })
})

并删除html中的onclick="request_access()"

另外：也许您还没有将“数据”传递给django模板。你能告诉我们生成的html和django视图函数吗？

Answer 4

<button class="btn-green" onclick="request_access('{{ data }}')" id="{{ data }}">Join Group</button>

javascript.js

function request_access(id){

    var request_data =id;
    console.log("data: " + request_data);
    $.post({
        url: "request_access",
        data : { request_data: request_data},
        success : function(json) {
            $("#request-access").hide();
            console.log("requested access complete");
        }
    })
}

点击发送数据

4 个答案: