点击发送数据

Question

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

模板.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 的语法不正确，还要在 onclick 处理程序中传递 this 实例。函数内部this指的是window对象而不是被点击的DOM元素。

HTML

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

jQuery

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

Answer 2

这是窗口对象。 不要在 html-tags 中使用事件处理程序。这是原因之一。拆分您的 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");
        }
    })
}