jquery.form.js使用

本文轉載自查看原文 2016-06-28 15:22 2500 JQuery

API

ajaxForm	增加所有需要的事件監聽器，為ajax提交表單做准備。ajaxForm並不能提交表單。在document的ready函數中，使用ajaxForm來為ajax提交表單進行准備。	接受0個或1個參數。參數可以是一個回調函數，也可以是一個Options對象。	$("#formid").ajaxForm();
ajaxSubmit	使用ajax提交表單。	接受0個或1個參數。參數可以是一個回調函數，也可以是一個Options對象。	$("#formid").ajaxSubmit(); 或 $("#formid").submit(function(){ //提交表單 $(this).ajaxSubmit(); // 為了防止普通瀏覽器進行表單提交和產生頁面導航（防止頁面刷新？）返回false return false; });
formSerialize	將表單串行化（或序列化）為一個查詢字符串。這個方法將返回以下格式的字符串：name1=value1&name2=value2。	無	var queryString = $("#formid").formSerialize(); // 現在可以使用$.get、$.post、$.ajax等來提交數據 $.post('myscript.php', queryString);
fieldSerialize	將表單的字段元素串行化（或序列化）為一個查詢字符串。當只有部分表單字段需要進行串行化（或序列化）時，使用這個就很方便了。返回以下格式的字符串：name=value1&name2=value2。	無	var queryString = $("#formid .specialFields").fieldSerialize();
fieldValue	返回匹配插入數組中的表單元素值。該方法以數組的形式返回數據。如果元素值被判定可能無效，則數組為空。	無	var pwds = $("#formid :password").fieldValue(); alert('The password is: ' + pwds[0]);
resetForm	將表單恢復到初始狀態。	無	$("#formid").resetForm();
clearForm	清除表單元素。該方法將所有的text、password、textarea置空，清除select元素中的選定，以及所有radio按鈕和checkbox按鈕重置為非選定狀態。	無	$("#formid").clearForm();
clearFields	清除字段元素。只有部分表單元素需要清除時方便使用。	無	$("#formid .specialFields").clearFields();

Options對象

ajaxForm和ajaxSubmit都支持眾多的選項參數，這些選項參數可以使用一個Options對象來提供。

target	指明頁面中由服務器響應進行更新的元素。元素的值可能被指定為一個jQuery選擇器字符串、一個jquery對象、一個DOM元素。在請求“成功”並且未設置dataType參數，則將返回的數據replaceWith()或html()掉對象原來的內容，再遍歷對象調用success回調函數。	默認值：null
url	指定提交表單數據的URL。	默認值：表單的action屬性值
type	指定提交表單數據的方法（method）：“GET”或“POST”。	默認值：表單的method屬性，若無，則為GET
beforeSubmit	表單提交前被調用的回調函數。如果回調函數返回false表單將不被提交。回調函數帶三個調用參數：數組形式的表單數據，jQuery表單對象，以及傳入ajaxForm/ajaxSubmit中的Options對象。	默認值：null
success	表單成功提交后調用的回調函數。然后dataType選項值決定傳回responseText還是responseXML的值。	默認值：null
dataType	返回的數據類型：null、"xml"、"script"、"json"其中之一。	默認值：null
resetForm	表示如果表單提交成功是否進行重置。	默認值：null
clearForm	表示如果表單提交成功是否清除表單數據。請求成功時觸發（同success），並用options. includeHidden做為回調函數參數。回調函數：$form.clearForm(options.includeHidden);	默認值：null
semantic	布爾值，指示表單元素序列化時是否嚴格按照表單元素定義順序。在序列化只有<input type=”image” />元素會放在序列化字符串的最后，若semantic=true，則會按照它的定義順序進行序列化。若你服務器嚴格要求表單序列化字符串的順序，則使用此參數進行控制。	默認值：false
data	（對象成員必須包含name和value屬性）提供額外數據對象，通過$.param()函數返回序列化后的字符串，稍后會拼接到表單元素序列化的字符串之后。
extraData	（此參數無需外部提供，由內部處理）此參數是data在進行序列化成字符串之前的一個拷貝，只用於在表單包含<input type=”file” />並且是老瀏覽器。因為在老瀏覽器中文件上傳文件我們需要通過<iframe>來模擬異步提交，此時extraData會轉變為<input type=”hidden” />元素包含在表單中，被一起提交到服務器。
traditional	如果你想要用傳統的方式來序列化數據，那么就設置為true。
delegation	（適用於ajaxForm）ajaxForm支持Jquery插件的委托方式（需要Jquery v1.7+），所以當你調用ajaxForm的時候其表單form不一定存在，但動態構建的form會在適當的時候調用ajaxSubmit。	`$('#myForm').ajaxForm({` `delegation:` `true` `,` `target:` `'#output'` `});`
replaceTarget	（默認：false）與target參數共同起作用，True則執行replaceWirh()函數，false則執行html()函數	`默認值：false`
includeHidden	在請求成功后，若設置執行clearForm()函數清空表單元素則會根據includeHidden設置決定如何清空隱藏域元素。 1)傳遞true，表示清空表單的所有隱藏域元素。 2)傳遞字符串，表示清空特殊匹配的隱藏域表單元素，eg：$('#myForm').clearForm('.special:hidden')，清空class屬性包含special值的隱藏域
iframe	若有文件上傳'input[type=file]:enabled[value!=""]'，指示是否應該使用<iframe>標簽（在支持html5文件上傳新特性的瀏覽器中不會使用iframe模式）	默認值：false
iframeTarget	指定一個現有的<iframe>元素，否則將自動生成一個<iframe>元素以及name屬性值。若現有的<iframe>元素沒有設置name屬性，則會自動生成一個name值
iframeSrc	為<iframe>元素設定src屬性值
beforeSerialize	提供在將表單元素序列化為字符串之前，處理表單元素的回調函數。簽名：function(form,options) 函數說明：當前表單對象、options參數集合返回值：返回false，表示終止表單提交操作。

注意：Options對象還可以用來將值傳遞給jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options，你可以利用它們來將Options對象傳遞給ajaxForm和ajaxSubmit。

示例：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JFormTest</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.form.js"></script>
    <script type="text/javascript">
        function SaveIt() {

            var options = {
                target: '#div_result',    // 把服務器返回的內容放入id為output的元素中
                beforeSubmit: ValiData,    // 提交前的回調函數
                success: DoResult,    // 提交后的回調函數
                // url : url,    //默認是form的action，如果申明，則會覆蓋
                // type : type,    // 默認值是form的method("GET" or "POST")，如果聲明，則會覆蓋
                // dataType : null,    // html（默認）、xml、script、json接受服務器端返回的類型
                // clearForm : true,    // 成功提交后，清除所有表單元素的值
                // resetForm : true,    // 成功提交后，重置所有表單元素的值
                timeout: 3000    // 限制請求的時間，當請求大於3秒后，跳出請求
            }
            debugger;
            //$("#ajaxForm").ajaxForm(function () {
            //    alert("提交成功1");
            //});
            //$("#ajaxForm").submit(function () {
            //    $(this).ajaxSubmit(function () {
            //        alert("提交成功1");
            //    });
            //    return false;
            //});
            //$("#btnSub").click(function () {
            //    $("#ajaxForm").ajaxSubmit(function () {
            //        alert("提交成功2");
            //    });
            //    return false;
            //});

            // ajaxForm
            //$("#form1").ajaxForm(options);

            // ajaxSubmit
            $("#form1").ajaxSubmit(options);

        }

        function ValiData(formData, jqForm, options) {
            debugger;
            // formData: 數組對象，提交表單時，form插件會以ajax方式自動提交這些數據，格式如[{name:user,value:val},{name:pwd,value:pwd}]
            // jqForm: jQuery對象，封裝了表單的元素
            // options: options對象

            var queryString = $.param(formData); // name=1&address=2
            var formElement = jqForm[0]; // 將jqForm轉換為DOM對象
            var address = formElement.name.value; // 訪問jqForm的DOM元素

            alert("提交成功 ValiData");
            return true; // 只要不返回false，表單都會提交，在這里可以對表單元素進行驗證
        }
        function DoResult(responseText, statusText) {
            debugger;
            // dataType=xml
            //var name = $("name", responseXML).text();
            //var address = $("address", responseXML).text();
            //$("#xmlout").html(name + " " + address);
            //// dataType=json
            //$("#jsonout").html(data.name + " " + data.address);
            alert("提交成功 DoResult:" + responseText);
        }

    </script>
</head>
<body>
    @using (Html.BeginForm("SaveData", "Home", FormMethod.Post, new { id = "form1" }))
    {
        <div id="div_result"></div>
        <br />
        <input type="text" name="name" value="jay" class="text text-left" />
        <br />
        <input type="text" name="mobile" value="15221098952" class="text text-left" />
        <br />
        <input type="button" onclick="SaveIt()" id="btnSub" value="Save it" class="btn btn-success" />
    }
</body>
</html>

后台cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplicationTest.Controllers
{
    public class HomeController : Controller
    {
        public class UserModel
        {
            public string name { get; set; }
            public string mobile { get; set; }
        }
        [HttpPost]
        public ContentResult SaveData(UserModel model)
        {
            return Content("My Name:" + model.name + " and My Mobile:" + model.mobile + "!!!");
        }
        public ActionResult JFormTest()
        {
            return View();
        }
    }
}

參考：

http://www.cnblogs.com/shuang121/archive/2012/04/23/2466647.html

http://www.cnblogs.com/heyuquan/p/form-plug-async-submit.html

http://www.cnblogs.com/sydeveloper/p/3754637.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery.form.js的ajaxSubmit和ajaxForm使用 jQuery.Form.js 異步提交表單使用總結使用jquery.form.js的ajaxsubmit方法提交數據的Bug js上傳視頻（jquery.form.js） jQuery通過jquery.form.js插件使用AJAX提交Form表單 jquery.form.js實現將form提交轉為ajax方式提交的使用方法使用Jquery.form.js ajax表單提交插件彈出下載提示框 jquery.form.js 讓表單提交更優雅 jquery.form.js提交 input file中的文件利用jquery.form.js實現將form提交轉為ajax方式提交的方法（帶上傳的表單提交）