jQuery經過jquery.form.js插件使用AJAX提交Form表單

時間 2019-12-14

標籤 jquery 經過 jquery.form.js form 插件使用 ajax 提交表單欄目 JQuery 简体版

原文原文鏈接

我簡單使用了一下,jQuery Form插件有一下優勢:
1.支持提交前驗證.
2.支持提交後回調.
3.採用AJAX方式,有很好的用戶體驗
4.提交方式是靈活.只要指定要提交的form ID便可.想提交那個form.就可提交那個.同時提交參數可配置.
5.支持提交多種類型數據.如:xml,json等.
主要的函數：
1.ajaxForm
增長全部須要的事件監聽器，爲AJAX提交表單作好準備。ajaxForm不能提交表單。在document的ready函數中，使用ajaxForm來爲AJAX提交表單進行準備。ajaxForm接受0個或1個參數。這個單個的參數既能夠是一個回調函數，也能夠是一個Options對象。
實例： javascript

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

2.ajaxSubmit
立刻由AJAX來提交表單。大多數狀況下，都是調用ajaxSubmit來對用戶提交表單進行響應。ajaxSubmit接受0個或1個參數。這個單個的參數既能夠是一個回調函數，也能夠是一個Options對象。
實例： php

// 綁定表單提交事件處理器
$('#myFormId').submit(function() {
// 提交表單
$(this).ajaxSubmit();
// 爲了防止普通瀏覽器進行表單提交和產生頁面導航（防止頁面刷新？）返回false
return false;
});

3.formSerialize
將表單串行化（或序列化）成一個查詢字符串。這個方法將返回如下格式的字符串：name1=value1&name2=value2。這個方法返回一個字符串。
實例： html

var queryString = $('#myFormId').formSerialize();
// 如今能夠使用$.get、$.post、$.ajax等來提交數據
$.post('myscript.php', queryString);

4.fieldSerialize
將表單的字段元素串行化（或序列化）成一個查詢字符串。當只有部分表單字段須要進行串行化（或序列化）時，這個就方便了。這個方法將返回如下格式的字符串：name1=value1&name2=value2。這個方法返回一個字符串。
實例： java

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

5.fieldValue
返回匹配插入數組中的表單元素值。從0.91版起，該方法將老是以數組的形式返回數據。若是元素值被斷定可能無效，則數組爲空，不然它將包含一個或多於一個的元素值。該方法返回數組。
實例： jquery

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

6.resetForm
經過調用表單元素原有的DOM方法，將表單恢復到初始狀態。
實例： web

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

7.clearForm
清除表單元素。該方法將全部的文本（text）輸入字段、密碼（password）輸入字段和文本區域（textarea）字段置空，清除任何select元素中的選定，以及將全部的單選（radio）按鈕和多選（checkbox）按鈕重置爲非選定狀態。
實例： ajax

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

8.clearFields
清除字段元素。只有部分表單元素須要清除時才方便使用。
實例： json

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

jQuery Form插件的簡單示例: 數組

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>My Jquery</title>
   <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
   <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>
   <script type="text/javascript"> 
   // wait for the DOM to be loaded
        $(document).ready(function() { 
         // bind 'myForm' and provide a simple callback function
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
        // attach handler to form's submit event 
        $('#myFormId').submit(function() {     
         // submit the form     
         $(this).ajaxSubmit();     
         // return false to prevent normal browser submit and page navigation     
         return false; 
        });
    </script>
</head>
<body>
   <form id="myForm" action="index.jsp" method="post">
    Name: <input type="text" name="name" />
    Comment:<textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
   </form>
</body>
</html>