一、前言 

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

二、快速入门 

1、增加表单代码

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

2、引入jQuery和Form插件文件

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  4. <script type="text/javascript" src="jquery.form.js"></script>
  5. <script type="text/javascript">
  6. // 等待装入DOM
  7. $(document).ready(function() {
  8. // 绑定'myForm'并提供一个简单的回调函数
  9. $('#myForm').ajaxForm(function() {
  10. alert("感谢你的评论!");
  11. });
  12. });
  13. </script>
  14. </head>
  15. ...

就这样简单,当该表单被提交时,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对象。
可链:是。

示例:

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

ajaxSubmit

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

示例:

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

formSerialize

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

示例:

  1. var queryString = $('#myFormId').formSerialize();
  2. // 现在可以使用$.get、$.post、$.ajax等来提交数据
  3. $.post('myscript.php', queryString);

fieldSerialize

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

示例:

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

fieldValue

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

示例:

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

resetForm

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

实例:

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

clearForm

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

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

clearFields

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

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

五、ajaxForm和ajaxSubmit的参数选项Options 

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

target

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


replaceTarget

任选,与 target 选项一起使用。如果想将目标元素一起替换掉,请设为 true,如果只想替换目标元素的内容
,则设为
 false。默认值:false在v2.43后增加

url

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

type

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

beforeSubmit

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

  1. [ { 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 

字符串值,当/如果使用iframe时作为iframe的src属性。 
默认值:about:blank
网页使用https协议时默认值为:javascript:false

forceSync 

布尔值,当上传文件(或使用iframe选项)时,提交表单前为了消除短延迟,设置为true。延迟的使用是为了让浏览器渲染DOM更新前执行原有的表单submit。这时显示一条信息告知用户,如:“请稍等...”,会改善可用性。
默认值:false 
在v2.38后增加

示例:

  1. // 准备好Options对象
  2. var options = {
  3. target:     '#divToUpdate',
  4. url:        'comment.php',
  5. success:    function() {
  6. alert('Thanks for your comment!');
  7. } };
  8. // 将options传给ajaxForm
  9. $('#myForm').ajaxForm(options);

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

六、代码实例及演示 

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

ajaxForm

  1. // prepare the form when the DOM is ready
  2. $(document).ready(function() {
  3. var options = {
  4. target:        '#output1',   // target element(s) to be updated with server response
  5. beforeSubmit:  showRequest,  // pre-submit callback
  6. success:       showResponse  // post-submit callback
  7. // other available options:
  8. //url:       url         // override for form's 'action' attribute
  9. //type:      type        // 'get' or 'post', override for form's 'method' attribute
  10. //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
  11. //clearForm: true        // clear all form fields after successful submit
  12. //resetForm: true        // reset the form after successful submit
  13. // $.ajax options can be used here too, for example:
  14. //timeout:   3000
  15. };
  16. // bind form using 'ajaxForm'
  17. $('#myForm1').ajaxForm(options);
  18. });
  19. // pre-submit callback
  20. function showRequest(formData, jqForm, options) {
  21. // formData is an array; here we use $.param to convert it to a string to display it
  22. // but the form plugin does this for you automatically when it submits the data
  23. var queryString = $.param(formData);
  24. // jqForm is a jQuery object encapsulating the form element.  To access the
  25. // DOM element for the form do this:
  26. // var formElement = jqForm[0];
  27. alert('About to submit: \n\n' + queryString);
  28. // here we could return false to prevent the form from being submitted;
  29. // returning anything other than false will allow the form submit to continue
  30. return true;
  31. }
  32. // post-submit callback
  33. function showResponse(responseText, statusText, xhr, $form)  {
  34. // for normal html responses, the first argument to the success callback
  35. // is the XMLHttpRequest object's responseText property
  36. // if the ajaxForm method was passed an Options Object with the dataType
  37. // property set to 'xml' then the first argument to the success callback
  38. // is the XMLHttpRequest object's responseXML property
  39. // if the ajaxForm method was passed an Options Object with the dataType
  40. // property set to 'json' then the first argument to the success callback
  41. // is the json data object returned by the server
  42. alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
  43. '\n\nThe output div should have already been updated with the responseText.');
  44. }

ajaxSubmit

  1. // prepare the form when the DOM is ready
  2. $(document).ready(function() {
  3. var options = {
  4. target:        '#output2',   // target element(s) to be updated with server response
  5. beforeSubmit:  showRequest,  // pre-submit callback
  6. success:       showResponse  // post-submit callback
  7. // other available options:
  8. //url:       url         // override for form's 'action' attribute
  9. //type:      type        // 'get' or 'post', override for form's 'method' attribute
  10. //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
  11. //clearForm: true        // clear all form fields after successful submit
  12. //resetForm: true        // reset the form after successful submit
  13. // $.ajax options can be used here too, for example:
  14. //timeout:   3000
  15. };
  16. // bind to the form's submit event
  17. $('#myForm2').submit(function() {
  18. // inside event callbacks 'this' is the DOM element so we first
  19. // wrap it in a jQuery object and then invoke ajaxSubmit
  20. $(this).ajaxSubmit(options);
  21. // !!! Important !!!
  22. // always return false to prevent standard browser submit and page navigation
  23. return false;
  24. });
  25. });
  26. // pre-submit callback
  27. function showRequest(formData, jqForm, options) {
  28. // formData is an array; here we use $.param to convert it to a string to display it
  29. // but the form plugin does this for you automatically when it submits the data
  30. var queryString = $.param(formData);
  31. // jqForm is a jQuery object encapsulating the form element.  To access the
  32. // DOM element for the form do this:
  33. // var formElement = jqForm[0];
  34. alert('About to submit: \n\n' + queryString);
  35. // here we could return false to prevent the form from being submitted;
  36. // returning anything other than false will allow the form submit to continue
  37. return true;
  38. }
  39. // post-submit callback
  40. function showResponse(responseText, statusText, xhr, $form)  {
  41. // for normal html responses, the first argument to the success callback
  42. // is the XMLHttpRequest object's responseText property
  43. // if the ajaxSubmit method was passed an Options Object with the dataType
  44. // property set to 'xml' then the first argument to the success callback
  45. // is the XMLHttpRequest object's responseXML property
  46. // if the ajaxSubmit method was passed an Options Object with the dataType
  47. // property set to 'json' then the first argument to the success callback
  48. // is the json data object returned by the server
  49. alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
  50. '\n\nThe output div should have already been updated with the responseText.');
  51. }

表单校验

1、HTML代码:

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

2、JavaSCript代码:

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

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

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

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

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

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

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

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

处理JSON数据

1、HTML代码:

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

2、服务器端代码(json- echo.php):

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

3、JavaScript代码(客户端):

  1. // prepare the form when the DOM is ready
  2. $(document).ready(function() {
  3. // bind form using ajaxForm
  4. $('#jsonForm').ajaxForm({
  5. // dataType identifies the expected content type of the server response
  6. dataType:  'json',
  7. // success identifies the function to invoke when the server response
  8. // has been received
  9. success:   processJson
  10. });
  11. });

4、回调函数processJson

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

处理responseXML数据

1、HTML代码:

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

2、服务器端PHP代码:

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

3、 JavaScript代码:

  1. // prepare the form when the DOM is ready
  2. $(document).ready(function() {
  3. // bind form using ajaxForm
  4. $('#xmlForm').ajaxForm({
  5. // dataType identifies the expected content type of the server response
  6. dataType:  'xml',
  7. // success identifies the function to invoke when the server response
  8. // has been received
  9. success:   processXml
  10. });
  11. });

4、回调函数(处理返回的XML数据):

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

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

处理responseTEXT数据

1、HTML代码:

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

2、服务器端PHP代码:

  1. <?php
  2. echo '<div style=" padding:20px">' . $_POST['message'] . '</div>';
  3. ?>

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

3、JavaScript代码:

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

注意:回调函数为一诺名函数,其对数据的显示加了一个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.

试译如下:

页面演示了表单插件的文件上传能力。这里没有专门处理文件上传的代码,file input元素会自动检测和处理。

文件上传无法使用浏览器的XMLHttpRequest对象,所以表单插件使用了隐藏的iframe元素来帮助处理上传任务。这种技术使用得比较普遍,但也存在固有局限性。iframe元素被用作表单提交操作的目标,意味着服务端的响应是发送到iframe的。如果返回类型是HTML或者XML的时候,它表现得很好,但如果返回类型是script或者JSON的话就无法工作。script和JSON经常含有一些在HTML标识中找到使用实参、需要呈现的字符。

为了解决返回script和JSON数据的难题,表单插件允许返回的这些数据植入到一个textarea元素中,当这些返回类型与文件上传一起使用时推存使用这一技术。请注意,如果在表单中没有file input元素,那么请求使用普通的XHR来提交表单(不是iframe)。张贴在这里的服务端代码可了解什么时候使用textarea,什么时候不使用。如果你愿意,可以使用插件的iframe参数选项来强迫使用iframe模式,然后服务器可以将返回数据植入到一个textarea中。下面的响应表明script是如何从服务器返回给表单的:

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

下面的表单提供了一个“file”类型的input元素和指定响应dataType的select元素。表单提交给files.php文件,该文件利用dataType来决定返回的响应类型。

  1. <form id="uploadForm" action="files.php" method="POST" enctype="multipart/form-data">
  2. <input name="MAX_FILE_SIZE" value="100000" type="hidden">
  3. File: <input name="file" type="file">
  4. Return Type: <select id="uploadResponseType" name="mimetype">
  5. <option value="html">html</option>
  6. <option value="json">json</option>
  7. <option value="script">script</option>
  8. <option value="xml">xml</option>
  9. </select>
  10. <input value="Submit" type="submit">
  11. </form>
  12. <p>
  13. <label>Output:</label>
  14. </p>
  15. <div id="uploadOutput"></div>
  1. $('#uploadForm').ajaxForm({
  2. beforeSubmit: function(a,f,o) {
  3. o.dataType = $('#uploadResponseType')[0].value;
  4. $('#uploadOutput').html('Submitting...');
  5. },
  6. success: function(data) {
  7. var $out = $('#uploadOutput');
  8. $out.html('Form success handler received: <strong>' + typeof data + '</strong>');
  9. if (typeof data == 'object' && data.nodeType)
  10. data = elementToString(data.documentElement, true);
  11. else if (typeof data == 'object')
  12. data = objToString(data);
  13. $out.append('<div><pre>'+ data +'</pre></div>');
  14. }
  15. });
    1. <?
    2. $type = $_POST['mimetype'];
    3. $xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
    4. if ($type == 'xml') {
    5. header('Content-type: text/xml');
    6. ?>
    7. <address attr1="value1" attr2="value2">
    8. <street attr="value">A &amp; B</street>
    9. <city>Palmyra</city>
    10. </address>
    11. <?
    12. }
    13. else if ($type == 'json') {
    14. // 如果请求不是从XHR来的,用一个textarea包裹json
    15. if (!$xhr) echo '<textarea>';
    16. ?>
    17. {
    18. "library": "jQuery",
    19. "plugin":  "form",
    20. "hello":   "goodbye",
    21. "tomato":  "tomoto"
    22. }
    23. <?
    24. if (!$xhr) echo '</textarea>';
    25. }
    26. else if ($type == 'script') {
    27. // 如果请求不是从XHR来的,用一个textarea包裹script
    28. if (!$xhr) echo '<textarea>';
    29. ?>
    30. for (var i=0; i < 2; i++)
    31. alert('Script evaluated!');
    32. <?
    33. if (!$xhr) echo '</textarea>';
    34. }
    35. else {
    36. // 为html请求返回文本var_dump
    37. echo "VAR DUMP:<p />";
    38. var_dump($_POST);
    39. foreach($_FILES as $file) {
    40. $n = $file['name'];
    41. $s = $file['size'];
    42. if (!$n) continue;
    43. echo "File: $n ($s bytes)";
    44. }
    45. }
    46. ?>

jQuery.Form插件介绍的更多相关文章

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

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  2. jQuery form插件的使用--处理server返回的JSON, XML,HTML数据

    详细代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> & ...

  3. jQuery form插件的使用--使用 fieldValue 方法校验表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

  5. jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象

    一.前提说明 Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 二.简单介绍 本文演示的是:jQue ...

  6. jQuery学习笔记(jquery.form插件)

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

  7. (转)jQuery LigerUI 插件介绍及使用之ligerTree

    一,简介  ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...

  8. jQuery form插件使用详解

    点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...

  9. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

随机推荐

  1. 【ERROR】EXP-00091

    问题: 在我们做exp的过程中可能经常会遇到EXP-00091: Exporting questionable statistics.这样的EXP信息,其实它就是exp的error message,它 ...

  2. python学习笔记013——模块

    1 模块module 1.1 模块是什么 模块是包含一系列的变量,函数,类等程序组 模块通常是一个文件,以.py结尾 1.2 模块的作用 1. 让一些相关的函数,变量,类等有逻辑的组织在一起,使逻辑更 ...

  3. 基于Linux的USB 主/从设备之间通讯的三种方式

    转载:http://archive.eet-china.com/www.eet-china.com/ART_8800323770_617693_TA_eda530e7.HTM 随着简单易用的USB接口 ...

  4. [Android&amp;Java]浅谈设计模式-代码篇:观察者模式Observer

    观察者,就如同一个人,对非常多东西都感兴趣,就好像音乐.电子产品.Game.股票等,这些东西的变化都能引起爱好者们的注意并时刻关注他们.在代码中.我们也有这种一种方式来设计一些好玩的思想来.今天就写个 ...

  5. nginx实战六

    Nginx错误日志 https://coding.net/u/aminglinux/p/nginx/git/blob/master/log/error.md Nginx错误日志平时不用太关注,但是一旦 ...

  6. ps photoshop cc 2015 Extract Assets(生成器)切图大法

    Extract Assets 是 Photoshop CC 2014 版本新增的一个特性,主要用来快速导出适用于 Web 和屏幕设计的资源,你可以用它导出 JPG.PNG.GIF,甚至是 SVG 图像 ...

  7. mysql特殊语句学习

    一.Mysql ON子句和USING子句 Mysql 中联接SQL语句中,ON子句的语法格式为:table1.column_name = table2.column_name. 当模式设计对联接表的列 ...

  8. 鼠标移至div内部其他层时,触发mouseout

    话说有一个DIV元素,其内部有一个IMG元素和SPAN元素,不用理会这两个内部元素怎么布局,这不是我要讨论的重点. 为了实现一些特殊的效果,我需要利用TD的onmouseover和onmouseout ...

  9. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  10. SourceInsight-显示文件完整路径

    使用Source insight的时候想看文件的全路径,但是默认的是中间省略的路径,所以可以通过: 1.Options-->Preferences-->Display 设置Trim lon ...