Ajax serialize() 方法没有读取 html 表单的所有数据字段

Posted 2023-02-24

技术标签:

【中文标题】Ajax serialize() 方法没有读取 html 表单的所有数据字段【英文标题】：Ajax serialize() method is not reading all data fields of html form 【发布时间】：2013-10-23 00:53:12 【问题描述】：

我正在尝试使用 jquery get() 方法发送我的网页的表单数据。但是当我提交表单时，只有少数字段数据被发送到服务器。

表格：

  <form class="form-horizontal" id="addpost" method="GET" action="">
        <div class="control-group">
            <label class="control-label" for="form-field">Post Title</label>
            <div class="controls">
                <input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
             </div>
         </div>
         <div class="control-group">
         <label class="control-label" for="form-field-11">Content Here</label>
            <div class="controls">
            <textarea name="post-content"  value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
            </div>
           </div><!-- Insert Image Code -->
           <div class="control-group">
            <div class="widget-main">
                <div class="controls">
                    <div class="ace-file-input">
                        <input id="id-input-file-2" type="file">
                        <a class="remove" href="#"></a>
                    </div>
                 </div>
                 <div class="controls">
                    <div class="ace-file-input ace-file-multiple">
                        <input id="id-input-file-3" type="file" multiple="">
                        <a class="remove" href="#">
                        <i class="icon-remove"></i>
                        </a>
                    </div>
                    <label>
                    <input id="id-file-format" type="checkbox" name="file-format">
                        <span class="lbl"> Allow only images</span>
                    </label>
                </div>
              </div>
             </div><!-- Insert Image Code -->
            <div class="space-4"></div>
            <div class="control-group">
                <label class="control-label" for="form-field-tags">Tag input</label>
                <div class="controls">
                    <input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
                </div>
            </div>

            <div class="space-4"></div>
            <div class="control-group">
                <label class="control-label" for="form-field-select-3">Select Category</label>
                <div class="controls">
                <label for="form-field-select-3">Chosen</label>
                <select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
                <option value="">
                </option><option value="Blog">Blog
                </option><option value="News Letter">News Letter
                </option></select>
             </div>
           </div>

     <div class="control-group" style="float:left; margin-right:25px">
        <div class="controls"><button type="submit" class="btn btn-info">
        <i class="icon-ok bigger-110"></i>
        <input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
        <button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
        </div>
     </div> 
     <div id="resp" style="float:left; margin-top:5px">
        <img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif"    />
      </div>
     </form>

Java脚本：

 $('#addpost').submit(function(e) 
 if(use_ajax)
        
            $('#loading').css('visibility','visible');
            $.get('test.php',$(this).serialize(),

                function(data)
                    if(parseInt(data)==-1)
                        $.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");

                    else
                    
                        $("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
                    

                    $('#loading').css('visibility','hidden');
                     setTimeout( "jQuery('#resp').hide('slow');",3000 );
                     setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
                    );
        
        e.preventDefault();

 );

在这只有 3 个字段值发送到服务器。即 Post-title、post-content 和 tags 我不知道为什么会这样。任何帮助将不胜感激。

【问题讨论】：

您是否随时禁用表单中的任何标签？ @pythonian29033 我表单中的所有标签都始终启用，我没有禁用任何标签如果输入元素中没有name 属性，serialize 不知道该如何命名。 @Steve - 我不记得上次我没有包含 name 属性...直到今晚。在我发现你的评论之前，我在墙上敲了一个小时，serialize 不会包含没有name 的字段！说得通。非常感谢您留下您的评论。 【参考方案1】：

我看到 attrbute name="" 是必需的，并且一些输入元素缺少这些。所以你可以尝试放置这个属性，看看是否能解决问题：

 <select class="chzn-select" name="your-elem-name">
 //--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr

【讨论】：

【参考方案2】：

你有两个问题。

Ajax 和序列化上传不适用于文件上传。 (Read this question and answer for async upload)

jquery form serialize 需要名称属性。您的选择框 (form-field-select-3) 没有名称属性。

以下是jquery serialize 文档页面中的注释-

注意：只有“successful controls”被序列化为字符串。不由于未提交表单，提交按钮值已序列化使用按钮。将表单元素的值包含在序列化字符串，该元素必须具有名称属性。值来自复选框和单选按钮（“radio”或“checkbox”类型的输入）仅当它们被选中时才包括在内。来自文件选择元素的数据没有序列化。

【讨论】：

该死的！我打字太快了！ *** 老兄。 :)【参考方案3】：

在整个表单中，如果所有四个元素都从高于零的索引中填充/选择，则只能发送四个元素；有这些名字的人； “标签” “文件格式” “发布内容” “后标题” 这是因为这些是唯一定义了名称属性的标签。请为您要发布到服务器的所有元素提供一个 name 属性，其中包含您要用来访问它们的发布索引。

【讨论】：

【参考方案4】：

这是因为你错过了选择元素中的“名称”属性

<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">

我已经检查了我的本地，现在一切正常。

如果有任何问题，请检查并告诉我。

谢谢

【讨论】：

它可以工作，但不会发送文件。那是因为序列化不支持文件（来自 Mohit Jain 的回答）。谢谢为此你可以检查这个答案：how-to-do-file-upload-using-jquery-serialization