您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > Javascript(JQuery)

JQuery:使用$.ajax()和serialize()函数提交大表单数据

作者:UncleToo  来源:原创  日期:2014-04-14 7:39:15
收藏  评论:( 0 )  阅读:1265

       JQuery为我们提供了一个非常有用的函数jQuery.serialize(),他能够将表单元素及数据统一编码,并作为字符串提交。当我们正在处理较大的HTML表单时是非常有用的。

       下面是一个比较大的表单,当我们填写完数据后,点击提交按钮,将数据通过Ajax提交给somefile.php,最后打印出serialize()函数编码后的字符串(数组)。

表单代码:

<html>
    <head>
        <title>大表单数据提交演示 - http://www.uncletoo.com</title>
        <script>
            $(function() {
                $("#frm_details").on("submit", function(event) {
                    event.preventDefault();
                    $.ajax({
                        url: "somefile.php",
                        type: "post",
                        data: $(this).serialize(),
                        success: function(d) {
                            alert(d);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <form name="frm_details" id="frm_details" method="post">
            <fieldset id="company_filters_fieldset">
                <legend>COMPANY DETAILS</legend>
                <div id="company_filters_div">
                    <input name="hdn_agnt_name" id="hdn_agnt_name" value="<?php echo $this->session->userdata('user_name'); ?>" type="hidden">
                    <table width="100%" cellspacing="0" cellpadding="0" border="0"  class="table">
                        <tbody>
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="company_name_advanced">Company Name*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Company Name" required size="30" maxlength="150" value="" id="company_name" name="company_name" >
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="internal_company_id">CODE*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Internal Company ID" size="30" maxlength="150" value="" id="internal_company_id" name="internal_company_id"  required>
                                </td>
                            </tr>
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="employee_size_advanced">Employee Size*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <select  style="width: 150px"  required  id="employee_size" name="employee_size">
                                        <option value="">-none-</option>
                                        <option value="0-500">0-500</option>
                                        <option value="501-1000">501-1000</option>
                                        <option value="1001-2500">1001-2500</option>
                                        <option value="2501-5000">2501-5000</option>
                                        <option value="5001-10000">5001-10000</option>
                                                                                                                       
                                    </select>
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="revenue_range_advanced">Revenue*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <select  style="width: 150px"  required  id="revenue_range" name="revenue_range">
                                        <option value="">-none-</option>
                                        <option value="LESS THAN 10 MILLION">LESS THAN 10 MILLION</option>
                                        <option value="10 Million to 50 Million">10 Million to 50 Million</option>
                                        <option value="50 Million to 100 Million">50 Million to 100 Million</option>
                                                                                                              
                                    </select>
                                </td>
                            </tr>
                                                                                                    
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="Website">Website</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="URL" title="Website" placeholder="http://www.uncletoo.com" size="30" maxlength="150" value="" id="Website" name="Website">
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row"></td>
                                <td width="20%" nowrap="nowrap"></td>
                            </tr>
                        </tbody></table>
                </div>
            </fieldset>
            <fieldset id="Address_filters_fieldset">
                <legend>ADDRESS</legend>
                <div id="Address_filters_div">
                    <table width="100%" cellspacing="0" cellpadding="0" border="0">
                        <tbody><tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="country">Country</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Country" size="30" maxlength="150" value="" id="country" name="country" class="yui-ac-input" autocomplete="off"><div id="CountryContainer" class="yui-ac-container"><div class="yui-ac-content" style="display: none;"><div class="yui-ac-hd" style="display: none;"></div><div class="yui-ac-bd"><ul><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li></ul></div><div class="yui-ac-ft" style="display: none;"></div></div><iframe frameborder="0" scrolling="no" src="javascript:false;" style="position: absolute; width: 0px; height: 0px; padding: 0px;" tabindex="-1" title="Presentational iframe shim"></iframe></div>
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="state">State</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <div id="state_div"> <input type="text" title="State" size="30" maxlength="150" value="" id="state" name="state"> </div>
                                </td>
                            </tr>
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="city">City*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <div id="city_div"> <input type="text" title="City" required size="30" maxlength="150" value="" id="city" name="city"> </div>
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="zip">Zip Code</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Zip Code" size="30" maxlength="150" value="" id="zip" name="zip">
                                </td>
                            </tr>
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="continent">Continent</label>
                                </td>
                                <td nowrap="nowrap" colspan="6">
                                    <input type="text" title="Continent" size="30" maxlength="150" value="" id="continent" name="continent">
                                </td>
                            </tr>
                        </tbody></table>
                </div>
            </fieldset>
            <fieldset id="contact_filters_fieldset">
                <legend>CONTACT</legend>
                <div id="contact_filters_div">
                    <table width="100%" cellspacing="0" cellpadding="0" border="0" class="table">
                        <tbody>                           
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="first_name">First Name*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="First Name" required size="30" maxlength="150" value="" id="first_name" name="first_name">
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="last_name">Last Name*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Last Name" required size="30" maxlength="150" value="" id="last_name" name="last_name">
                                </td>
                            </tr>
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="email">Email*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="email" title="Email" size="30" maxlength="150" value="" placeholder="demo@uncletoo.com" required id="email" name="email">
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="Phone">Phone*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Phone" required size="30" maxlength="150" value="" id="Phone" name="Phone">
                                </td>
                            </tr>
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="direct_num_extn">Extn</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Direct Number/Extn" size="30" maxlength="150" value="" id="direct_num_extn" name="direct_num_extn">
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row"></td>
                                <td width="20%" nowrap="nowrap"></td>
                            </tr>
                            <tr>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="job_title_advanced">Titles*</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Titles" size="30" required maxlength="150" value="" id="job_title" name="job_title">
                                </td>
                                <td width="5%" nowrap="nowrap" scope="row">
                                    <label for="dapartment_advanced">Department</label>
                                </td>
                                <td width="20%" nowrap="nowrap">
                                    <input type="text" title="Department" size="30" maxlength="150" value="" id="department" name="department">
                                </td>
                            </tr>
                        </tbody></table>
                </div>
            </fieldset>
            <fieldset id="ADV_filter1_fieldset">
                <legend>Links</legend>
                <div id="ADV1_filters_div">
                                                                                                     
                </div>
            </fieldset>
            <fieldset>
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr>
                            <td nowrap="nowrap" colspan="2" scope="row" height="10">
                            </td>
                        </tr>
                        <tr>
                            <td nowrap="nowrap" colspan="2" scope="row">
                                <input type="submit" class="btn btn-info" id="bdm_count_submit" name="bdm_count_submit" value="Save" >
                                &nbsp;&nbsp;&nbsp;
                                <input type="reset" class="btn btn-info" id="bdm_count_reset" name="bdm_count_reset" value="Reset" >
                            </td>
                        </tr>
                    </tbody>
                </table>
            </fieldset>
        </form>
    </body>      
</html>


somefile.php

<?php
print_r($_POST);
?>

为了演示方便,此文件只是将字符串打印,没有其他功能



JQuery
 
Ajax
 
表单
 
除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/jsjquery/889.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论