`
happmaoo
  • 浏览: 4509076 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JQuery Form插件介绍

jQueryjsonAjaxPHPJavaScript 
阅读更多

一、前言

jQuery From插件是一个优秀的Ajax表单插件，使用它可以让你非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery From有两个主要方法：ajaxForm和ajaxSubmit，它们集合了从控制表单元素到决定如何管理提交进程的功能，这两个方法支持许多充分控制数据提交的参数选项（options）。用Ajax来提交表单，你不可能找到比这个更容易的了。

二、快速入门

1、增加表单代码 

<body>
<form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="提交评论" />
</form>
</body>

2、引入jQuery和Form插件文件 

<html>
<head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
 
    <script type="text/javascript">
        // 等待装入DOM
        $(document).ready(function() {
            // 绑定'myForm'并提供一个简单的回调函数
            $('#myForm').ajaxForm(function() {
                alert("感谢你的评论！");
            });
        });
    </script>
</head>
...

就这样简单，当该表单被提交时，name和comment字段会被提交给comment.php文件进行处理，如果服务器返回成功状态，用户就会看到“感谢”信息。

三、表单插件下载

jQuery From插件的当前最新版本为2.43，支持jQuery 1.3.2。

下载地址：http://github.com/malsup/form/raw/master/jquery.form.js?v2.43


四、表单插件API


英文原文：http://www.malsup.com/jquery/form/#api

表单插件API提供了几个方法，让你轻松管理表单数据和进行表单提交。

ajaxForm

增加所有需要的事件监听器，为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。
可链：是。

示例：

$('#myFormId').ajaxForm();

ajaxSubmit

马上由AJAX来提交表单。大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。
可链：是。

示例：

  // 绑定表单提交事件处理器
 $('#myFormId').submit(function() {
     // 提交表单
     $(this).ajaxSubmit();
     // return false是为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）
     return false;
  });

formSerialize

将表单序列化成一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2 。
可链：否，这个方法返回一个字符串。

示例：

var queryString = $('#myFormId').formSerialize();

// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

fieldSerialize

将表单的字段元素序列化成一个查询字符串。当只有部分表单字段需要进行序列化时，这个就方便了。这个方法将返回以下格式的字符串：name1=value1&name2=value2。
可链：否，这个方法返回一个字符串。

示例：

var queryString = $('#myFormId .specialFields').fieldSerialize();

fieldValue

返回匹配插入数组中的表单元素值。从0.91版起，该方法将总是以数组的形式返回数据。如果元素值被判定可能无效，则数组为空，否则它将包含一个或多于一个的元素值。
可链：否，该方法返回数组。

示例：

// 取得密码输入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);

resetForm

通过调用表单元素原有的DOM方法，将表单恢复到初始状态。
可链：是。

实例：

$('#myFormId').resetForm();

clearForm

清除表单元素。该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空，清除任何 select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox）按钮重置为非选定状态。
可链：是。

$('#myFormId').clearForm();

clearFields

清除字段元素。只有部分表单元素需要清除时才方便使用。
可链：是。

$('#myFormId .specialFields').clearFields();


五、ajaxForm和ajaxSubmit的Options

ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个 JavaScript对象，它包含了如下一些属性与值的集合：

target

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。

url

指定提交表单数据的URL。
默认值：表单的action属性值

type

指定提交表单数据的方法（method）：“GET”或“POST”。
默认值：表单的method属性值（如果没有找到默认为“GET”）。

beforeSubmit

表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果 “beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据：

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

默认值：null

success

表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回 responseText还是responseXML的值。
默认值：null

dataType

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：

'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。
'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。
'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。
默认值：null（服务器返回responseText值）

semantic

布尔标志，表示数据是否必须严格按照语义顺序（slower？）来进行提交。注意：一般来说，表单已经按照语义顺序来进行了序列化，除了 type="image"的input元素。如果你的服务器有严格的语义要求，以及表单中包含有一个type="image"的input元素，就应该将 semantic设置为true。
默认值：false

resetForm

布尔标志，表示如果表单提交成功是否进行重置。
默认值: null

clearForm

布尔标志，表示如果表单提交成功是否清除表单数据。
默认值：null

iframe


布尔标志，指明表单是否总以iframe作为服务器响应的目标，它与文件上传一起使用。欲了解更多信息，参看代码实例页面的文件上传文档。
默认值：false

iframeSrc

String value that should be used for the iframe's src attribute when/if an iframe is used.
Default value: about:blank
Default value for pages that use https protocol: javascript:false

forceSync
Boolean value. Set to true to remove short delay before posting form when uploading files (or using the iframe option). The delay is used to allow the browser to render DOM updates prior to performing a native form submit. This improves usability when displaying notifications to the user, such as "Please Wait..."
Default value: false
Added in v2.38

示例：

// 准备好Options对象
 var options = {
     target:     '#divToUpdate',
     url:        'comment.php',
     success:    function() {
         alert('Thanks for your comment!');
     } };

  // 将options传给ajaxForm
 $('#myForm').ajaxForm(options);

注意：Options对象还可以用来将值传递给 jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options，你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。


六、代码实例及演示

地址：http://www.malsup.com/jquery/form/#ajaxForm

ajaxForm 

// prepare the form when the DOM is ready
$(document).ready(function() {
    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'
    $('#myForm1').ajaxForm(options);
});
 
// 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('About to submit: \n\n' + 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)  {
    // for normal html responses, the first argument to the success callback
    // is the XMLHttpRequest object's responseText property
 
    // if the ajaxForm method was passed an Options Object with the dataType
    // property set to 'xml' then the first argument to the success callback
    // is the XMLHttpRequest object's responseXML property
 
    // if the ajaxForm method was passed an Options Object with the dataType
    // property set to 'json' then the first argument to the success callback
    // is the json data object returned by the server
 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
        '\n\nThe output div should have already been updated with the responseText.');
}

ajaxSubmit 

// prepare the form when the DOM is ready
$(document).ready(function() {
    var options = {
        target:        '#output2',   // 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 to the form's submit event
    $('#myForm2').submit(function() {
        // inside event callbacks 'this' is the DOM element so we first
        // wrap it in a jQuery object and then invoke ajaxSubmit
        $(this).ajaxSubmit(options);
 
        // !!! Important !!!
        // always return false to prevent standard browser submit and page navigation
        return false;
    });
});
 
// 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('About to submit: \n\n' + 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)  {
    // for normal html responses, the first argument to the success callback
    // is the XMLHttpRequest object's responseText property
 
    // if the ajaxSubmit method was passed an Options Object with the dataType
    // property set to 'xml' then the first argument to the success callback
    // is the XMLHttpRequest object's responseXML property
 
    // if the ajaxSubmit method was passed an Options Object with the dataType
    // property set to 'json' then the first argument to the success callback
    // is the json data object returned by the server
 
    alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
        '\n\nThe output div should have already been updated with the responseText.');
}

表单校验

1、HTML代码：

<form id="validationForm" action="dummy.php" method="post"> 
    Username: <input type="text" name="username" /> 
    Password: <input type="password" name="password" /> 
    <input type="submit" value="Submit" /> 
</form>

2、JavaSCript代码：

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#myForm2').ajaxForm( { beforeSubmit: validate } ); 
});

注意其中的$('#myForm2').ajaxForm( { beforeSubmit: validate } );一句，这是指明进行Ajax提交前先进行表单输入校验。validate为校验回调函数。如果返回false，则终止Ajax提交。

3、验证方法一：利用formData 参数进行校验

function validate(formData, jqForm, options) { 
    // formData is an array of objects representing the name and value of each field 
    // that will be sent to the server;  it takes the following form: 
    // 
    // [ 
    //     { name:  username, value: valueOfUsernameInput }, 
    //     { name:  password, value: valueOfPasswordInput } 
    // ] 
    // 
    // To validate, we can examine the contents of this array to see if the 
    // username and password fields have values.  If either value evaluates 
    // to false then we return false from this method. 
 
    for (var i=0; i < formData.length; i++) { 
        if (!formData[i].value) { 
            alert('Please enter a value for both Username and Password'); 
            return false; 
        } 
    } 
    alert('Both fields contain values.'); 
}

4、验证方法二：利用jqForm参数来进行校验

function validate(formData, jqForm, options) { 
    // jqForm is a jQuery object which wraps the form DOM element 
    // 
    // To validate, we can access the DOM elements directly and return true 
    // only if the values of both the username and password fields evaluate 
    // to true 
 
    var form = jqForm[0]; 
    if (!form.username.value || !form.password.value) { 
        alert('Please enter a value for both Username and Password'); 
        return false; 
    } 
    alert('Both fields contain values.'); 
}

5、验证方法三：利用fieldValue方法来进行校验

function validate(formData, jqForm, options) { 
    // fieldValue is a Form Plugin method that can be invoked to find the 
    // current value of a field 
    // 
    // To validate, we can capture the values of both the username and password 
    // fields and return true only if both evaluate to true 
 
    var usernameValue = $('input[name=username]').fieldValue(); 
    var passwordValue = $('input[name=password]').fieldValue(); 
 
    // usernameValue and passwordValue are arrays but we can do simple 
    // "not" tests to see if the arrays are empty 
    if (!usernameValue[0] || !passwordValue[0]) { 
        alert('Please enter a value for both Username and Password'); 
        return false; 
    } 
    alert('Both fields contain values.'); 
}

处理JSON数据

1、HTML代码：

<form id="jsonForm" action="json-echo.php" method="post"> 
    Message: <input type="text" name="message" value="Hello JSON" /> 
    <input type="submit" value="Echo as JSON" /> 
</form>

2、服务器端代码（json- echo.php）：

<?php  echo '{ message: "' . $_POST['message'] . '" }';  ?>

3、JavaScript代码（客户端）：

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#jsonForm').ajaxForm({ 
        // dataType identifies the expected content type of the server response 
        dataType:  'json', 
 
        // success identifies the function to invoke when the server response 
        // has been received 
        success:   processJson 
    }); 
});

4、回调函数processJson

function processJson(data) { 
    // 'data' is the json object returned from the server 
    alert(data.message); 
}

处理responseXML数据

1、HTML代码：

<form id="xmlForm" action="xml-echo.php" method="post"> 
    Message: <input type="text" name="message" value="Hello XML" /> 
    <input type="submit" value="Echo as XML" /> 
</form>

2、服务器端PHP代码：

<?php 
// !!! IMPORTANT !!! - the server must set the content type to XML 
header('Content-type: text/xml'); 
echo '<root><message>' . $_POST['message'] . '</message></root>'; 
?>

3、 JavaScript代码：

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#xmlForm').ajaxForm({ 
        // dataType identifies the expected content type of the server response 
        dataType:  'xml', 
 
        // success identifies the function to invoke when the server response 
        // has been received 
        success:   processXml 
    }); 
});

4、回调函数（处理返回的XML数据）：

function processXml(responseXML) { 
    // 'responseXML' is the XML document returned by the server; we use 
    // jQuery to extract the content of the message node from the XML doc 
    var message = $('message', responseXML).text(); 
    alert(message); 
}

注意$().text()的用法，由于JQuery支持xpath，因此处理XML DOM文档非常简单方便。

处理responseTEXT数据

1、HTML代码：

<form id="htmlForm" action="html-echo.php" method="post"> 
    Message: <input type="text" name="message" value="Hello HTML" /> 
    <input type="submit" value="Echo as HTML" /> 
</form>

2、服务器端PHP代码：

<?php 
echo '<div xxxxx="background-color:#ffa; padding:20px">' . $_POST['message'] . '</div>'; 
?>


注意：返回的TEXT数据为HTML代码。

3、JavaScript代码：

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#htmlForm').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '#htmlExampleTarget', 
 
        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $('#htmlExampleTarget').fadeIn('slow'); 
        } 
    }); 
});

注意：回调函数为一诺名函数，其对数据的显示加了一个JQuery的淡出特效。如果机器速度太快的话，效果并不明显。

处理文件上传

原文：
This page demonstrates the Form Plugin's file upload capabilities. There is no special coding required to handle file uploads. File input elements are automatically detected and processed for you.

Since it is not possible to upload files using the browser's XMLHttpRequest object, the Form Plugin uses a hidden iframe element to help with the task. This is a common technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.

To account for the challenges of script and JSON responses, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads. Please note, however, that if there is no file input in the form then the request uses normal XHR to submit the form (not an iframe). This puts the burden on your server code to know when to use a textarea and when not to. If you like, you can use the iframe option of the plugin to force it to always use an iframe mode and then your server can always embed the response in a textarea. The following response shows how a script should be returned from the server:

<textarea>
for (var i=0; i < 10; i++) {
// do some processing
}
</textarea>

The form below provides an input element of type "file" along with a select element to specify the dataType of the response. The form is submitted to files.php which uses the dataType to determine what type of response to return.

由上面引用的英文可知，文件上传无法使用浏览器的XMLHttpRequest对象，所以表单插件使用了隐藏的iframe元素来帮助处理上传任务。这种技术使用得比较普遍，但也存在不足。iframe元素被用来作为表单提交操作的目标，意味着服务端的响应是写到iframe的。如果响应类型是HTML或者XML的时候，它表现得很好，但如果响应类型是script或者JSON的话却无法工作。

<form id="uploadForm" action="files.php" method="POST" enctype="multipart/form-data">
                <input name="MAX_FILE_SIZE" value="100000" type="hidden">
                File: <input name="file" type="file">
                Return Type: <select id="uploadResponseType" name="mimetype">

                    <option value="html">html</option>
                    <option value="json">json</option>
                    <option value="script">script</option>
                    <option value="xml">xml</option>
                </select>
    <input value="Submit" type="submit">
</form>
<p>
<label>Output:</label>
</p>
<div id="uploadOutput"></div>
$('#uploadForm').ajaxForm({
        beforeSubmit: function(a,f,o) {
            o.dataType = $('#uploadResponseType')[0].value;
            $('#uploadOutput').html('Submitting...');
        },
        success: function(data) {
            var $out = $('#uploadOutput');
            $out.html('Form success handler received: <strong>' + typeof data + '</strong>');
            if (typeof data == 'object' && data.nodeType)
                data = elementToString(data.documentElement, true);
            else if (typeof data == 'object')
                data = objToString(data);
            $out.append('<div><pre>'+ data +'</pre></div>');
        }
    });

<?
    $type = $_POST['mimetype'];
    $xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';

    if ($type == 'xml') {
        header('Content-type: text/xml');
?>
<address attr1="value1" attr2="value2">
    <street attr="value">A &amp; B</street>
    <city>Palmyra</city>
</address>
<?
    }
    else if ($type == 'json') {
        // wrap json in a textarea if the request did not come from xhr
        if (!$xhr) echo '<textarea>';
?>

{
    "library": "jQuery",
    "plugin":  "form",
    "hello":   "goodbye",
    "tomato":  "tomoto"
}

<?
        if (!$xhr) echo '</textarea>';
    }
    else if ($type == 'script') {
        // wrap script in a textarea if the request did not come from xhr
        if (!$xhr) echo '<textarea>';
?>

for (var i=0; i < 2; i++)
    alert('Script evaluated!');

<?
        if (!$xhr) echo '</textarea>';
    }
    else {
        // return text var_dump for the html request
        echo "VAR DUMP:<p />";
        var_dump($_POST);
        foreach($_FILES as $file) {
            $n = $file['name'];
            $s = $file['size'];
            if (!$n) continue;
            echo "File: $n ($s bytes)";
        }
    }
?>


效果图一：

效果图二：


分享到：
| 在Ubuntu 9.10下搭建Java开发环境（四）： ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery form插件的各个版本

    - 引入jQuery库和jQuery Form插件：首先确保引入jQuery库，然后引入`jquery.form.js`。 - 初始化插件：通过`$('form').ajaxForm(options)`或`$('form').form(options)`来启用插件，并设置相应的配置选项。 - 配置...

    jquery表单验证插件

    #### 二、jQuery Form插件介绍 jQuery Form插件由Malsup开发，是一款非常实用的jQuery扩展，能够极大地简化表单的Ajax提交过程。它不仅提供了一套完整的API来管理表单数据，还支持复杂的表单验证与文件上传等功能。 ...

    jquery-form.zip

    ### 一、jQuery Form插件介绍 `jquery.form.js`是jQuery Form插件的主要脚本文件，它提供了对HTML表单的Ajax提交支持，允许开发者在不刷新页面的情况下进行数据交互，提升用户体验。这个插件不仅可以处理简单的POST...

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

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

    jquery form jquery.form.js

    《jQuery Form插件详解及其应用》 jQuery Form插件，基于jQuery库，是用于处理HTML表单的增强工具，能够方便地实现异步提交、文件上传等功能，极大地简化了前端开发人员的工作。在这个主题中，我们将深入探讨jQuery...

    jquery form

    ### 一、jQuery Form 插件介绍 jQuery Form插件由Malsup开发，它允许开发者以Ajax方式提交表单，提供了多种自定义选项以满足不同需求。这个插件不仅支持异步提交，还可以实现文件上传，这对于传统的Ajax提交来说是...

    jQuery-Form-书本实例.rar

    1. **jQuery Form 插件介绍** jQuery Form插件是由Malsup创建的，它提供了对HTML表单的全面控制，包括异步提交（AJAX）、文件上传、实时验证和进度显示等功能。通过使用这个插件，开发者可以轻松地将表单提交转变为...

    jquery form插件

    jquery的一个form插件，通过很简单的ajaxForm和ajaxSubmit两个函数，就可以自动获取指定表单的所有信息并提交，省略手写jquery的ajax函数的繁琐过程。文件里除了这个插件拥有的一些函数外，还包含函数使用的解释代码...

    jquery.form用type=file上传文件

    ### jQuery Form 插件介绍 jQuery Form插件是Brendan Abbott开发的一个开源项目，它可以与jQuery无缝集成，提供了一套完整的解决方案来处理表单的异步提交（包括文件上传）。这个插件支持多种提交方式，如AJAX、...

    jquery-form 异步提交表单

    ### jQuery Form 插件介绍 jQuery Form插件是基于jQuery的一个强大工具，它可以轻松地将任何HTML表单转换为异步提交，实现无刷新的数据交换。这个插件的核心功能是通过Ajax技术发送表单数据，无需离开当前页面，...

    Ajax表单提交插件jquery form

    总结来说，jQuery Form插件是提升Web应用表单交互体验的强大工具，它简化了Ajax提交表单的流程，同时提供了丰富的自定义选项和事件处理，使开发者能够轻松处理复杂的表单提交场景。结合后端处理，如`submit.php`，...

    Jquery validate和form插件

    **jQuery validate 和 form 插件详解** 在网页开发中，用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...

    jquery form表单美化插件

    首先，我们要理解jQuery Form插件的核心功能。它提供了一种简单的方法来处理表单提交，支持异步AJAX提交，这意味着用户在提交表单时无需离开当前页面，提高了交互性。此外，该插件还提供了丰富的反馈机制，如进度条...

    jqueryform.js

    "jqueryform.js"是一个非常实用的jQuery插件，它简化了这一过程，提供了对表单的AJAX化支持，包括文件上传和进度显示功能。本文将深入探讨jQuery Form插件的原理、使用方法以及实际应用。 首先，jQuery Form插件的...

    jQuery表单插件jquery.form.js(示例源码)

    jQuery Form Plugin能够让你简洁的将...插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的可选参数，能够让你对表单里数据的提交做到完全的控制。

    jquery form ajax 插件

    1. 插件介绍：jQuery Form Plugin是由Malsup开发的一款插件，它扩展了jQuery的功能，允许我们轻松地使用AJAX方式处理表单提交，实现无刷新的数据交互。这个插件不仅支持GET和POST提交，还支持文件上传，是前端开发中...

    Jquery插件，JqueryUI,JqueryForm,JqueryValidate,Jqueryvsdoc

    在这个压缩包中，我们重点探讨的是几个基于 jQuery 的核心插件，它们分别是：jQuery UI、jQuery Form、jQuery Validate 和 jQuery vsdoc。 1. **jQuery UI** jQuery UI 是一个扩展了 jQuery 功能的开源库，提供了...

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

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

    jquery-form - jQuery表单生成插件

    jQuery-form 是一个强大的jQuery插件，专门用于处理HTML表单的提交、上传和Ajax交互，大大简化了前端开发者与服务器端进行数据交换的过程。这个插件使得动态表单的创建和管理变得更加简单，同时提供了丰富的功能，如...

Magicbox
Global site tag (gtag.js) - Google Analytics