jquery.form.js知識

淺談jquery.form.js的ajaxSubmit和ajaxForm的使用

依賴的指令碼檔案

<script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="../Javascript/jquery.form.js" type="text/javascript"></script>

ajaxSubmit 和ajaxForm區別

ajaxForm

ajaxForm()不能提交表單。在document的ready函式中，使用ajaxForm來為AJAX提交表單進行準備。提交動作必須由submit開始

ajaxForm()適用於以表單提交方式處理ajax技術（需要提供表單的action、id、 method，最好在表單中提供submit按鈕）它大大簡化了使用ajax技術提交表單時的資料傳遞問題，使用ajaxForm()你不需要逐個的以JavaScript的方式獲取每個表單屬性的值，並且也不需要在請求路徑後面通過url重寫的方式傳遞資料。ajaxForm()會自動收集當前表單中每個屬性的值，然後將其以表單提交的方式提交到目標url。這種方式提交資料較安全，並且使用起來更簡單，不必寫過多冗餘的JavaScript程式碼

ajaxSubmit

ajaxSubmit()馬上由AJAX來提交表單。你可以在任何情況下進行該項提交。

ajaxSubmit()適用於以事件的機制以ajax提交form表單（超連結、圖片的click事件），該方法作用與ajaxForm()類似，但它更為靈活，因為他依賴於事件機制，只要有事件存在就能使用該方法。你只需指定該form的action屬性即可，不需要提供submit按鈕。

示例程式碼

<!--HTML-->
  <form id="form1" name="form1">
    <input id="userName" name="userName" value="姓名" />
    <input id="age" name="age" value="30" />
    <input type="submit" value="submit" />
  </form>
  <input id="myButton" type="button" value="提交" />
  <!--javascript-->
  <script type="text/javascript">

    var myData = {
      "CnName": "周佳良",
      "EnName":"zhoujl"
    };
    $(function () {
      var ajaxFormOption = {
        type: "post", //提交方式 
        dataType: "json", //資料型別 
        data: myData,//自定義資料引數，視情況新增
        url: "TestHandler.ashx?type=ajaxForm", //請求url 
        success: function (data) { //提交成功的回撥函式 
          document.write("success");
        }
      };

      //form中有submit按鈕——方式1
      $("#form1").ajaxForm(ajaxFormOption);

      //form中有submit按鈕——方式2
      $("#form1").submit(function () {
        $(this).ajaxSubmit(ajaxFormOption);
        return false;
      });

      //不需要submit按鈕，可以是任何元素的click事件
      $("#myButton").click(function () {
        $("#form1").ajaxSubmit(ajaxFormOption);
        return false;
      });

    });
  </script>

---

利用jquery.form.js的ajaxSubmit實現不跳轉提交表單資料

我們直接通過form提交的話， 提交後當前頁面跳轉到form的action所指向的頁面。然而，很多時候我們比不希望提交表單後頁面跳轉，那麼，我們就可以使用ajaxSubmit(obj)來提交資料

//form表單阻止提交
<form onsubmit="return saveForm()"><form>
function saveForm(){
    var validatestatus = $('#myForm').valid();//與validate配合使用,必須先驗證
     if(validatestatus){
    　　$('#myForm').ajaxSubmit(function() {
        alert("設定儲存成功！");
        window.location.href=
    　　});
　　return false; //阻止表單預設提交
}

<form>
    標題：<input type="text" name="title" /><br />
    內容：<textarea name="content"><textarea/><br />
    <button>提交</button>
</form>

$('button').on('click', function() {

    $('form').on('submit', function() {
        var title = $('inpur[name=title]').val(),
            content = $('textarea').val();

        $(this).ajaxSubmit({
            type: 'post', // 提交方式 get/post
            url: 'your url', // 需要提交的 url
            data: {
                'title': title,
                'content': content
            },
            success: function(data) { // data 儲存提交後返回的資料，一般為 json 資料
                // 此處可對 data 作相關處理
                alert('提交成功！');
            }
            $(this).resetForm(); // 提交後重置表單
        });
        return false; // 阻止表單自動提交事件
    });
});

---

jquery form的ajaxform提交表單上傳檔案後伺服器端返回json資料不能正常獲得使用

ajaxForm提交表單上傳檔案後伺服器端返回json資料IE瀏覽器無法解析 ，到後來跟蹤一個網站同樣地功能才找到問題所在，原來使用ajaxForm,必須以html格式返回json資料.text/html;charset=UTF-8