form 精髓 jquery js

form 精华 jquery js
Get 和 Post 区别 (2008-12-8)
    post请求无长度限制
    get有长度限制，最长不超过2048字节（2k, 1024个汉字）

    表单提交中get和post方式的区别

    1.get是从服务器上获取数据，post是向服务器传送数据。

    2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。
    post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。
    用户看不到这个过程。

    3.对于get方式，服务器端用Request.QueryString获取变量的值，
    对于post方式，服务器端用Request.Form获取提交的数据。

    4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
    但理论上，IIS4中最大量为80KB，IIS5中为100KB。

    5.get安全性非常低，post安全性较高。


1.通用函数

        function getDataAjax( url,showContentDiv ) {
            $('#'+showContentDiv).html("<div style='background:yellow;'><img src='images/qa/loading2.gif' ></img> 请稍候 ...</div>");
            $('#'+showContentDiv).show();
            $.get(url,function(data){ $('#'+showContentDiv).html(data); });
        }

        function loadHtml( divId,htmlUrl ) {
            $('#'+divId).show();//$('#'+divId).show();
            $('#'+divId).load(htmlUrl);
        }

        function resetForm( formId ) {
            $('#'+formId).resetForm();
        }

        function submitForm( formId,postUrl,statusId ) {
            $('#'+statusId).html('<img src="images/qa/loading2.gif"></img> 请稍候...');
            $('#'+statusId).show();
            formAllValue = $('#'+formId).formSerialize();
            $.ajax({
                type: "POST",
                url: postUrl,
                data: formAllValue,
                success: function(data) {
                    $('#'+statusId).html(data);
                }
            });
        }

        function submitFormJump( formId,postUrl,statusId,jumpUrl ) {
            $('#'+statusId).html('<img src="images/qa/loading2.gif"></img> 请稍候...');
            $('#'+statusId).show();
            formAllValue = $('#'+formId).formSerialize();//serialize();
            $.ajax({
                type: "POST",
                url: postUrl,
                data: formAllValue,
                success: function(data) {
                    $('#'+statusId).html(data+'<span style="background:yellow;width:20px;margin-left:10px;">页面跳转中...< /span>');
                    document.location.href = jumpUrl;
                }
            });
        }

        function submitStr( strValue,postUrl,statusId ) {
            $('#'+statusId).html('<img src="images/qa/loading2.gif"></img> 请稍候...');
            $('#'+statusId).show();
            $.ajax({
                type: "POST",
                url: postUrl,
                data: strValue,
                success: function(data) {
                    $('#'+statusId).html(data);
                }
            });
        }

        function submitStrJump( strValue,postUrl,statusId,jumpUrl ) {
            $('#'+statusId).html('<img src="images/qa/loading2.gif"></img> 请稍候...');
            $('#'+statusId).show();
            $.ajax({
                type: "POST",
                url: postUrl,
                data: strValue,
                success: function(data) {
                    $('#'+statusId).html(data+'<span style="background:yellow;width:20px;margin-left:10px;">页面跳转中...< /span>');
                    document.location.href = jumpUrl;
                }
            });
        }

        function toggleShowHide( divId ) {
            $('#'+divId).toggleClass('hide');
        }

        function hideDiv( divId ) {
            $('#'+divId).hide();//$('#'+divId).attr("style","display:none;");
        }

        function jumpUrl( jumpUrl ) {
            document.location.href = jumpUrl;
        }

        function disableButton( buttonId,buttonValue ) {
            $('#'+buttonId).attr('disabled',true);
            if( buttonValue!='' ) {
                $('#'+buttonId).attr('value',buttonValue);
            }
        }

        function submitFormDefault( formId ) {
            $('#'+formId).submit();
        }


2.表單傳值

        返回json结构
        dataType:"json"

        function updateBbsEditForm() {
            $('#status_bbs_edit').html('<img src="template/images/loading2.gif"></img> 请稍候...');
            $('#status_bbs_edit').show();
            formAllValue = $('#form_bbs_edit').serialize();
            $.ajax({
            type: "POST",
            url: 'index.php?action=bbs&type=edit_bbs_update',
            data: formAllValue,
            dataType:"json",
            success: function(data) {
                var int_num_id = $('#int_num_id').val();
                if( data.disp==1 ) {
                $('#div_button_release_'+int_num_id).html($('#hidden_div_button_release_yet_'+int_num_id).html());
                } else {
                $('#div_button_release_'+int_num_id).html($('#hidden_div_button_release_'+int_num_id).html());
                }
                $('#status_bbs_edit').html(data.tip);
            }

            });
        }


        echo json_encode(array('tip'=>$str_tip,'disp'=>$bln_disp));


3.表單提交重置

                $('#form_login').clearForm();//jquery.form.js
                $('#form_login').submit();//jquery.form.js
                $('#str_role').attr('value','1');
                $('#status_add_ad').hide();
                $('#str_edu').val('');
                $('#str_enroll_date').val('2001');
                $('input[@name=str_term]').get(0).checked = true;

                function resetBbsAddForm() {
                    $('#form_bbs_add').clearForm();
                    $('#int_sub_type').val('1');
                    $('#int_disp_order').val('0');
                }


4.checkbox選中

                $('input[@name=str_term]').get(0).checked = true;
                bbs_status = $('input[@name=int_status_flag][@checked]').val();
              
                所有选中的radio
                $("input[@type=radio][@checked]")

        function selectAllCheckbox() {
            var checked = $('#checkbox_select').get(0).checked;
            $('#checkbox_toggle').get(0).checked = false;
            $('#checkbox_search_not').get(0).checked = false;
            $('#checkbox_basic').get(0).checked = false;
            var inputs = document.getElementsByTagName('input');
            var inputsLen = inputs.length;
            for( var i=5;i<inputsLen;i++ ) {
                if( inputs[i].type.toLowerCase()=='checkbox' ) {
                    inputs[i].checked = checked;
                }
            }
        }

        function toggleAllCheckbox() {
            $('#checkbox_select').get(0).checked = false;
            $('#checkbox_toggle').get(0).checked = true;
            $('#checkbox_search_not').get(0).checked = false;
            $('#checkbox_basic').get(0).checked = false;
            var inputs = document.getElementsByTagName('input');
            var inputsLen = inputs.length;
            for( var i=5;i<inputsLen;i++ ) {
                if( inputs[i].type.toLowerCase()=='checkbox' ) {
                    inputs[i].checked = !inputs[i].checked;
                }
            }
        }

        function cancelAllCheckboxSelected() {
            var inputs = document.getElementsByTagName('input');
            var inputsLen = inputs.length;
            for( var i=5;i<inputsLen;i++ ) {
                if( inputs[i].type.toLowerCase()=='checkbox' ) {
                    inputs[i].checked = false;
                }
            }
        }


            制作插件

                全选|取消

                    //插件
                    $.fn.check = function(mode) {
                        var mode = mode || 'on'; // if mode is undefined, use 'on' as default
                        return this.each(function() {
                            switch(mode) {
                            case 'on':
                                this.checked = true;
                                break;

                            case 'off':
                                this.checked = false;
                                break;

                            case 'toggle':
                                this.checked = !this.checked;
                                break;
                            }
                         });
                    };


                    $(function() {
                        $('#selectAll').toggle(
                            function() {
                            $("input[@type=checkbox]").check('off');
                            },
                            function() {
                            $("input[@type=checkbox]").check('on');
                            }
                        )

                    });


                    <span id="selectAll">全选</span>
                    <input type="checkbox" />1
                    <input type="checkbox" />2
                    <input type="checkbox" />3


5.改變,獲取頁面元素屬性

                    $(this).attr('src','index.php?action=register&type=create_pin_code'+"&"+Math.random());
                    $('#str_role').attr('value','1');
                    $('#str_edu').val('');
                    $('#str_enroll_date').val('2001');


                    $('#str_sex_preview').html($('input[@name*=str_sex][@checked]').attr("title"));
                    $('#str_edu_preview').html($("select[@name=str_edu] option[@selected]").text());
                    $('#str_job_preview').html($("select[@name=str_job] option[@selected]").text());
                    $('#str_area_preview').html($("select[@name=str_area] option[@selected]").text());

                    $('#str_interest_preview').html(get_interest());
                    $('#str_photo_preview').html(get_iframe_document("iframe_upload_photo").getElementById('show_photo').innerHTML);


                    /**
                     * get string about interest
                     * @param type 1:title 2:value
                     * @author andy
                     */
                    var get_interest = function( type ) {
                        var attr_type;
                        if( type==2 ) {
                            attr_type = "value";
                        } else {
                            attr_type = "title";
                        }
                        var arr_interest = new Array();
                        $('input[@name*=str_interest][@checked]').each(function(i) {
                            arr_interest[i] = $(this).attr(attr_type);
                        });
                        if( arr_interest.length!=0 ) {
                            str_interest = arr_interest.join();
                        } else {
                            str_interest = '';
                        }
                        return str_interest;
                    }

                    var get_iframe_document = function( iframeId ) {
                        var iframe = null;
                        if ( document.getElementById(iframeId).contentWindow.document ) {//if contentDocument exists, W3C compliant (Mozilla)
                             iframe = document.getElementById(iframeId).contentWindow.document;
                         } else {//IE
                             iframe = document.frames[iframeId].document;
                         }
                         return iframe;
                    }