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

? 而且提交的方式需要用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());
};

?