带有复选框的AJAX

AJAX with a checkbox

本文关键字：AJAX 复选框      更新时间：2023-09-26

我是AJAX和JavaScript的新手，但决定使用AJAX将基于HTML"标记的值发送到Python处理程序。下面是我的代码，从这个网站模拟。我遇到的问题是理解当一个框是"checked"与"unchecked"时，当我在输入标记中有"unchecking"时，值是如何传递的？我没有得到连接，因为我想确保用户点击的任何东西都能通过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>

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

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

如果你想看看传递了什么，只需用python打印你通过复选框名称收到的内容。。。

首先，正确的选择器是：checked
А并且您应该只在选中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());
});

请注意，若不选中checbox，它的值将不会发送到服务器（这是默认的浏览器行为）。所以您只需检查后台脚本中是否存在状态字段即可。

相关文章：