带有复选框的 AJAX

Question

我是 AJAX 和 JavaScript 的新手，但我决定使用 Ajax 将基于 HTML "" 标记的值发送到 Python 处理程序。下面是我的代码，由site 模拟而来。我遇到的问题是了解一个框何时“选中”与“未选中”，当我在输入标签中“未选中”时，值如何传递？我没有获得连接，因为我想确保用户点击的任何内容都会通过 AJAX 传递到我的 Python 处理程序。

send_data = function(status) {

        $.ajax({
      url: "/subscription",
            dataType: "json",
            data: {'status' : status},
            type: "POST",
            cache: false

    }).done(function(data, status, xml) {

         var obj = jQuery.parseJSON(data);
         alert(obj.success);

        }).fail(function(jqXHR, textStatus, errorThrown) {


        }).always(function() {


        });

}


$(document).ready(function() {

    $("#subscription").submit(function() {

        var cb = $("input#switch-1");

        if (cb.is("checked")) {
            send_data(cb.val());
        } else {
            send_data(cb.val());
        }
        return false; 
    });

});

<form id="subscription" action="">
    <label  class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
    <input type="checkbox" id="switch-1" name="status" class="mdl-switch__input" id="status" unchecked />
    <span class="mdl-switch__label">USEREMAIL Subscribed</span>
<input type="submit" value="Submit" />

</form>

Answer 1

您当前的代码可以像这样减少，您正在徒劳地进行验证，在这两种情况下您发送的是相同的东西......

$("#subscription").submit(function() {
    var cb = $("input#switch-1");
    send_data(cb.val()); //your current code can be reduced like this
    return false; 
});

如果您想查看传递的内容，只需使用 python 打印您通过复选框名称收到的内容...

Answer 2

首先，正确的选择器是:checked。
Аnd 你应该只在检查时将复选框值传递给 send_data() 函数，否则你的条件是无关紧要的 - 你对检查和未检查的输入做同样的事情。

所以，你的代码应该是这样的：

if (cb.is(":checked")) {
    send_data(cb.val());
} else {
    send_data(null);
}

但如果您只需要将表单值传递给服务器，则无需手动处理复选框，您可以这样做：

var send_data = function(data) {
    $.ajax({
        url: "/subscription",
        dataType: "json",
        data: data,
        type: "POST",
        cache: false
    }).done(function(data, status, xml) {
        var obj = jQuery.parseJSON(data);
        alert(obj.success);
    }).fail(function(jqXHR, textStatus, errorThrown) {

    }).always(function() {

    });
}

$("#subscription").submit(function() {
    send_data($(this).serialize());
});

请注意，如果未选中复选框，它的值将不会发送到服务器（这是默认的浏览器行为）。因此，您只需检查后端脚本中状态字段的存在即可。