jquery.form.js的使用

   最近要写个组件管理，但是遇到一个问题，因为组件需要循环生成多个表单，表单的数量是不固定的。

  而且提交的方式需要用ajax方式，于是想到了用jquery.form.js。

  官方网站为。

  http://www.malsup.com/jquery/form/

  因为form表单是不固定的，所以表单的提交方式需要改良。

function submitform(formid){

      var options = {
                target:        '#output1',   // target element(s) to be updated with server response
                beforeSubmit:  showRequest,  // pre-submit callback
                success:       showResponse  // post-submit callback
        
                // other available options:
                //url:       url         // override for form's 'action' attribute
                //type:      type        // 'get' or 'post', override for form's 'method' attribute
                //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
                //clearForm: true        // clear all form fields after successful submit
                //resetForm: true        // reset the form after successful submit
        
                // $.ajax options can be used here too, for example:
                //timeout:   3000
            };
            // bind form using 'ajaxForm'
            $(表单id).ajaxForm(options);
           
        $(表单id).submit();
   
}
// pre-submit callback
function showRequest(formData, jqForm, options) {
    // formData is an array; here we use $.param to convert it to a string to display it
    // but the form plugin does this for you automatically when it submits the data
    var queryString = $.param(formData);
 
    // jqForm is a jQuery object encapsulating the form element.  To access the
    // DOM element for the form do this:
    // var formElement = jqForm[0];
 
 alert("获取了"+queryString);
    // here we could return false to prevent the form from being submitted;
    // returning anything other than false will allow the form submit to continue
    return true;
}
 
// post-submit callback
function showResponse(responseText, statusText, xhr, $form)  {
     alert("执行了");
  
}

 

使用的时候中文会出现乱码，网上一般都是改jquery.js但是，这样所以的表单提交都要转码了。

所以最好的方式是改jquery.form.js。

找到$.fieldValue方法，修改里面的return转码，encodeURIComponent，在后台再解码即可。

$.fieldValue = function(el, successful) {
    var n = el.name, t = el.type, tag = el.tagName.toLowerCase();
    if (successful === undefined) {
        successful = true;
    }

    if (successful && (!n || el.disabled || t == 'reset' || t == 'button' ||
        (t == 'checkbox' || t == 'radio') && !el.checked ||
        (t == 'submit' || t == 'image') && el.form && el.form.clk != el ||
        tag == 'select' && el.selectedIndex == -1)) {
            return null;
    }

    if (tag == 'select') {
        var index = el.selectedIndex;
        if (index < 0) {
            return null;
        }
        var a = [], ops = el.options;
        var one = (t == 'select-one');
        var max = (one ? index+1 : ops.length);
        for(var i=(one ? index : 0); i < max; i++) {
            var op = ops[i];
            if (op.selected) {
                var v = op.value;
                if (!v) { // extra pain for IE...
                    v = (op.attributes && op.attributes['value'] && !(op.attributes['value'].specified)) ? op.text : op.value;
                }
                if (one) {
                    return v;
                }
                a.push(v);
            }
        }
        return a;
    }
    return encodeURIComponent($(el).val());
};