javascript - 序列化不发送表单中的所有数据

Question

最近，我开始使用 serialize() 在 ajax 调用中发送表单值。除了一种情况外，它在大多数情况下都有效。

div proposal-type包含选定或未选定的输入复选框。该值仅作为选择之一发送。因此，简而言之，我不确定如何发送数据中的变量以及序列化。

我尝试过:

var datastring = $('#proposal-form').serialize();
data: {
    "type": type},
    datastring
,

和

var datastring = $('#proposal-form').serialize();
data: 
    "type": type,
    datastring
,

但两者都没有运气。下面是更多代码。有人知道我该如何做到这一点吗？

<form method="POST" action="" id="proposal-form">
    <div class="panel-input"><input type="text" id="proposal-name" name="proposal_name" class="proposal-input" placeholder="Name *"></div>
    <div class="panel-input"><input type="email" id="proposal-email" name="proposal_email" class="proposal-input" placeholder="Email *"></div>
    <div class="panel-input"><input type="tel" id="proposal-phone" name="proposal_phone" class="proposal-input" placeholder="Phone *"></div>
    <div class="panel-input"><input type="text" id="proposal-location" name="proposal_location" class="proposal-input" placeholder="Location *"></div>
    <div class="panel-input"><input type="text" id="proposal-company" name="proposal_company" class="proposal-input" placeholder="Company *"></div>
    <div class="panel-input">
    <div id="proposal-type" class="proposal-input"></div>
        <div id="proposal-type-drop">
                <label class="drop-item">A<input type="checkbox" name="prop-type" class="drop-item-input" value="A"></label>
                <label class="drop-item">B<input type="checkbox" name="prop-type" class="drop-item-input" value="B"></label>
                <label class="drop-item">C<input type="checkbox" name="prop-type" class="drop-item-input" value="C"></label>
            </div>
    </div>
    <textarea class="proposal-text" id="proposal-description" name="proposal_description" placeholder="Project Details *"></textarea>
</form>

submitHandler: function(form) {
        event.preventDefault();
        /*var proposal_name = $('#proposal-name').val();
        var proposal_email = $('#proposal-email').val();
        var proposal_phone = $('#proposal-phone').val();
        var proposal_location = $('#proposal-location').val();
        var proposal_company = $('#proposal-company').val();*/
        var type = $('.drop-item-input:checked').map(function() {
                        return $(this).val();
                    }).get().join(', ');
        //var proposal_description = $('#proposal-description').val();
        var datastring = $('#proposal-form').serialize();
        $.ajax({
            url: "php/proposal-send.php", 
            type: "POST",
            data: 
                /*"proposal_name": proposal_name,
                "type": type,*/
                datastring
            ,

Answer 1

要为复选框提交多个值，您需要将 [] 添加到它们的名称中，以便它们的值将以数组形式提交。

您还可以通过在方括号之间放置一个整数来手动增加数组索引。

不添加括号符号基本上会覆盖每个后续检查的同名输入的复选框值。

如果没有括号，查询字符串看起来像这样:

prop-type=A&prop-type=B&prop-type=c

用括号出来是这样的:

prop-type[]=A&prop-type[]=B&prop-type[]=c