jquery.form.js的施用

jquery.form.js的使用

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

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

　　官方网站为。

　　因为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());
};

本文来源于：http://www.educity.cn/wenda/51189.html