JQuery表单序列化

时间:2017-04-04 09:30:09

标签: javascript jquery ajax serialization

我在以下表单中使用.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将表单发布到我的后端,绑定到#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"

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

1 个答案:

答案 0 :(得分:1)

已解决:我正在禁用表单输入,以便在执行ajax请求时不允许用户修改内容:

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

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

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

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