javascript - JQuery 表单序列化

Question

我在以下表单上使用 .serialize() 时遇到问题:

        <form id="cfgedit">
        <div class="card hoverable">
            <div class="card-content">
                <div class="row center-align">
                    <div class="col s12 m4 input-field"><input type="text" id="bpid" name="bpid" value="" /><label for="bpid">Business Partner</label></div>
                    <div class="col s12 m4 input-field"><input type="text" id="serviceid" name="serviceid" value="" /><label for="serviceid">Service ID</label></div>
                    <div class="col s12 m4 input-field"><input type="text" id="servicetype" name="servicetype" value="" /><label for="servicetype">Service Type</label></div>
                </div>

                <div class="row teal lighten-5">
                    <div class="input-field col s12">
                        <textarea id="smstext" name="smstext" class="materialize-textarea flow-text" length="160"></textarea>
                        <label for="smstext">SMS Text</label>
                    </div>
                </div>

                <div class="row">
                    <div class="col s12 m6 input-field right-align"><input type="text" id="url" name="url" value="" /><label for="url">Url destinazione</label></div>
                    <div class="col s12 m6"><strong>Validit&agrave;:</strong><br />
                        <input type="number" name="validityD" min="0" value="1"> d
                        <input type="number" name="validityH" min="0" max="23" value="0"> h
                        <input type="number" name="validityM" min="0" max="59" value="0"> m
                    </div>
                </div>
            </div>
            <div class="card-action">
                <a class="btn btn-large waves-effect red" href="/admin">Cancel</a>
                <a class="waves-effect btn-large right" id="persist">Save</a>
            </div>
        </div>
    </form>

我使用 $.ajax 将表单发布到我的后端，绑定(bind)到 #persist 按钮点击。

$.ajax({
    type: "POST",
    url: "/admin/config/add",
    data: $("#cfgedit").serialize(),
    success: function(data) {
            // display ok
    },
    error: function(data)
    {
            // display not ok
    }
});

现在我面临的问题是 $.ajax 数据。因为使用 Chrome 的控制台并输入 $("#cfgedit").serialize(); 我确实得到了正确的表单序列化:

"bpid=TEST_BP&serviceid=TEST_SID&servicetype=TEST_ST&smstext=SMS_TEXT&url=http%3A%2F%2Ftest.url&validityD=1&validityH=2&validityM=3"

但是如果我发送表单，则相同的序列化仅返回

"smstext=SMS_TEXT"

我期望输出的字段都设置了名称属性。

Answer 1

已解决:我禁用表单输入，以防止用户在执行 ajax 请求时修改内容:

$("input").attr("disabled", "disabled");

在禁用输入之前保存值解决了问题。

var values = $("#cfgedit").serialize();

.serialize() 没有序列化禁用的字段。