`

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

 

分享到:
评论
1 楼 曾老师 2012-09-18  
给你自个看去吧

相关推荐

    jquery.form.js下载

    jquery.form.js jquery.form.js

    jquery form jquery.form.js

    在压缩包中,源代码位于`src/jquery.form.js`,而压缩包的`dist`目录下提供了压缩后的`jquery.form.js.min.js`,便于在生产环境中使用,减少加载时间。 二、核心功能 1. 异步提交:jQuery Form支持AJAX方式提交...

    jquery.form.js解决opera冲突问题

    jquery.form.js解决opera冲突问题 使用jquery.form.js如果jquery使用的是1.9以上的版本会报opera找不到 以解决 备份下

    jquery.form.js下载_jquery.form.js上传文件插件下载

    **jQuery.form.js插件详解与应用** jQuery.form.js是一款基于jQuery库的插件,它为开发者提供了方便、灵活的表单处理功能,尤其在异步(AJAX)提交表单方面表现出色。这款插件使得在网页上实现无刷新的文件上传和...

    jquery.form.min.js

    jquery.form.min.js是一个异步提交表单的插件,使用该插件可以设置callback函数,并且页面不会跳转

    jquery.form.js和使用说明

    文档`jquery表单验证插件_jquery.form.js.doc`应该包含了更详细的使用指南、示例代码以及常见问题解答。在实际应用中,开发者应仔细阅读这份文档,理解每个选项和方法的含义,以便更好地利用jQuery Form Plugin。 ...

    jquery.form.js

    本文将详细探讨`jquery.form.js`的使用方法、主要功能及其在实际项目中的应用。 一、`jquery.form.js`简介 `jquery.form.js`是由Malsup开发的一款jQuery插件,它的主要目标是提供一种优雅的方式来处理表单的异步...

    Jquery.form.js

    Jquery.form.js可以非常简单的实现表单的异步提交,相对于同样是异步上传的ajaxfileupload,它能够实现文件跨域上传。

    jquery文件上传js:jquery.form.js

    《jQuery文件上传技术详解——基于jquery.form.js》 在Web开发中,文件上传是一项常见的功能,而jQuery作为JavaScript的一个强大库,提供了丰富的插件来简化这一过程。其中,`jquery.form.js`是一款专为文件上传...

    jquery.form.min.js(4.2.2version,最新版本)

    * jQuery Form Plugin * version: 4.2.2 * Requires jQuery v1.7.2 or later * Project repository: https://github.com/jquery-form/form * Copyright 2017 Kevin Morris * Copyright 2006 M. Alsup * Dual ...

    使用jQuery.form插件,实现完美的表单异步提交

    本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form插件的基本用法。在开始之前,请确保已经在项目中引入了jQuery库以及jQuery.form插件。通常,这两个文件可以通过...

    jquery表单验证插件jquery.form.js.pdf

    从提供的文件信息中,我们可以抽取出关于jquery表单验证插件jquery.form.js的知识点,包括其使用方法、功能和相关API介绍等。 首先,jquery.form.js是一个专门用于处理表单的jQuery插件,它提供了简化AJAX表单提交...

    jQuery.form.js

    使用jQuery Form Plugin,开发者可以轻松实现表单的验证,例如通过自定义函数或内置的验证规则检查输入数据的有效性。此外,它还提供了丰富的事件回调,如`beforeSubmit`、`success`和`error`,允许开发者在表单生命...

Global site tag (gtag.js) - Google Analytics