Ajax serialize（）方法不读取html表单的所有数据字段 [英] Ajax serialize() method is not reading all data fields of html form

问题描述

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

I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.

表格：

  <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" width="16" height="16" alt="loading" />
      </div>
     </form>

JavaSccript：

JavaSccript:

 $('#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个字段值中。
那是标题后，后期内容和标签
我不知道为什么会发生这种情况。
任何帮助都将不胜感激。

In this only 3 field values where sent to server. That is Post-title, post-content and tags I don't know why this happening. Any help would be appreciated.

推荐答案

你有两个问题。

1. Ajax和序列化上传不适用于文件上传。 （阅读此问题和答案以进行异步上传）

jquery form serialize 需要name属性。您的选择框（ form-field-select-3 ）没有name属性。

jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.

以下是 jquery序列化文档页面 -

following is a note in jquery serialize documentation page -

注意：只有成功控件被序列化为字符串。没有
提交按钮值被序列化，因为表单未使用按钮提交
。要使表单元素的值包含在
序列化字符串中，该元素必须具有name属性。
复选框和单选按钮（radio或checkbox类型的输入）
的值仅在选中时才包括在内。来自文件选择元素
的数据未被序列化。

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

这篇关于Ajax serialize（）方法不读取html表单的所有数据字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！