在Jquery中以JSON形式传递复选框值

Passing checkbox values as JSON in Jquery

本文关键字：复选框 Jquery 中以 JSON      更新时间：2023-10-12

我有一个输入表单，它有三个文本字段和一个复选框输入部分，用户可以在其中选择多个值。我还有一个ajax请求，它向api发送POST请求。我已经编写了一个函数来迭代表单输入并将其解析为JSON，然而，我注意到这对复选框值不起作用。这是我的功能：

<script>
console.log(document);
var form = document.getElementById("myform");
form.onsubmit = function (e) {
    // stop the regular form submission
    e.preventDefault();
    // collect the form data while iterating over the inputs
    var info = {};
    for (var i = 0, ii = form.length; i < ii; ++i) {
        var input = form[i];
        if (input.name) {
            info[input.name] = input.value;
        }
        addPerson(info);
    }
}
function addPerson(info) {
    $.ajax({
        type: "POST",
        url: "http://example.com",
        data: JSON.stringify(info),
        contentType: "application/json; charset=utf-8",
        crossDomain: true,
        dataType: "json",
        success: function (data, status, jqXHR) {
            alert("success");
        },
        error: function (jqXHR, status) {
            // error handler
            console.log(jqXHR);
        }
    });
}
</script>

我一直在尝试使用将复选框值转换为JSON

$.each($('input[id="data[i].id"]:checked'), function() {
    var value = $(this).val();
    qualifications.push(value);
});

但我不知道如何将这些值添加到发布到服务器的JSON中，有人能帮忙吗？

已经尝试过.serialize（），我认为它正在工作-

<script>
$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
$(function() {
    $('myform').submit(function() {
        $('#result').text(JSON.stringify($('myform').serializeObject()));
        return false;
    });
});

function addPerson(result){
  $.ajax({
         type: "POST",
         url: "http://example.com",
         data: JSON.stringify(result),
         contentType: "application/json; charset=utf-8",
         crossDomain: true,
         dataType: "json",
         success: function (data, status, jqXHR) {
             alert("success");
         },
         error: function (jqXHR, status) {
             // error handler
             console.log(jqXHR);
         }
      });
  }


</script>

如果有人对以上内容的有效性有什么想法/意见，或者是否有更好的方法，我想听听他们的意见？

试试这个：

var input = form[i];
if (input.name) {
    if(input.tagName.toLowerCase() === 'input' && 
       (input.type.toLowerCase() === 'checkbox' || input.type.toLowerCase() === 'radio') &&
       input.checked)
         info[input.name] = input.value;
    else
       info[input.name] = input.value;
}
addPerson(info);

编辑：

我建议使用@Drixson-Oseña提到的jQueryform.serialize()方法。

相关文章：