Jquery Ajax表單提交插件jquery form用法

時間 2019-12-02

標籤 jquery ajax 表單提交插件 form 用法欄目 JQuery 简体版

原文原文鏈接

首先咱們載入jquery庫和jquery.form.js插件。jquery.form.js插件的官網地址：http://www.malsup.com/jquery/form/javascript

代碼以下	複製代碼
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.form.min.js"></script>php

而後，咱們在頁面的body中加入一個簡單的表單代碼：html

代碼以下

複製代碼

<form id="my_form" action="submit.php" method="post">
   <p>姓名：<input type="text" name="uname" id="uname" class="input"></p>
   <p>性別：<input type="radio" name="sex" value="1" checked> 男 <input type="radio"
   name="sex" value="2"> 女 </p>
   <p>年齡：<input type="text" name="age" id="age" class="input" ></p>
   <p ><input type="submit" class="btn" value="提交">
   <span id="msg"></span></p>
</form>
<div id="output"></div>java

表單中，要求輸入姓名、性別和年齡，而後提交到submit.php處理，一般狀況下，點擊「提交」按鈕後，頁面會轉到submit.php處理表單數據，而咱們使用jquery.form插件後，頁面並不會跳轉，直接完成了一個ajax交互。
jQueryjquery

咱們很方便的調用jquery.form插件，利用ajaxSubmit()使得整個表單的ajax提交過程變得很是的簡單。ajax

代碼以下

複製代碼

$(function(){
    var options = {
        beforeSubmit: showRequest, //提交前處理
        success:       showResponse, //處理完成
        resetForm: true,
        dataType: 'json'
    };

    $('#my_form').submit(function() {
        $(this).ajaxSubmit(options);
    });
});

function showRequest(formData, jqForm, options) {
    var uname = $("#uname").val();
    if(uname==""){
        $("#msg").html("姓名不能爲空！");
        return false;
    }

    var age = $("#age").val();
    if(age==""){
        $("#msg").html("年齡不能爲空！");
        return false;
    }
    $("#msg").html("正在提交...");


    return true;
}

function showResponse(responseText, statusText) {
    $("#msg").html('提交成功');
    var sex = responseText.sex==1?"男":"女";
    $("#output").html("姓名："+responseText.uname+" 性別："+sex+" 年齡："+responseText.age);
} 數據庫

以上代碼完成了表單提交前的驗證以及提交後的處理。表單數據提交到submit.php後，咱們能夠根據實際狀況經過submit.php檢測數據、將數據寫入數據庫，返回操做結果等等操做，本文再也不列出代碼。
ajaxSubmit()選項設置json

ajaxSubmit()提供了豐富的選項設置，咱們根據使用的可能性大小進行列表，以供參考。數組

屬性	描述
url	Ajax請求將要提交到該url，默認是表單的action屬性值
type	指定提交表單數據的方法（method）：「GET」或「POST」。默認值：表單的method屬性值（若是沒有找到默認爲「GET」）。
dataType	指望返回的數據類型。null、「xml」、「script」或者「json」其中之一。dataType提供一種方法，它規定了怎樣處理服務器的響應。這個被直接地反映到jQuery.httpData方法中去。下面的值被支持： 'xml'：若是dataType == 'xml'，將把服務器響應做爲XML來對待。同時，若是「success」回調方法被指定，將傳回responseXML值。 'json'：若是dataType == 'json'，服務器響應將被求值，並傳遞到「success」回調方法，若是它被指定的話。。 'script'：若是dataType == 'script'，服務器響應將求值成純文本。。默認值：null（服務器返回responseText值）
target	指明頁面中由服務器響應進行更新的元素。元素的值可能被指定爲一個jQuery選擇器字符串，一個jQuery對象，或者一個DOM元素。默認值：null。
beforeSubmit	表單提交前被調用的回調函數。「beforeSubmit」回調函數做爲一個鉤子（hook），被提供來運行預提交邏輯或者校驗表單數據。若是「beforeSubmit」回調函數返回false，那麼表單將不被提交。「beforeSubmit」回調函數帶三個調用參數：數組形式的表單數據，jQuery表單對象，以及傳入ajaxForm/ajaxSubmit中的Options對象。默認值：null
success	表單成功提交後調用的回調函數。若是提供「success」回調函數，當從服務器返回響應後它被調用。而後由dataType選項值決定傳回responseText仍是responseXML的值。默認值：null
clearForm	表示若是表單提交成功是否清除表單數據。默認值：null
resetForm	表示若是表單提交成功是否進行重置。默認值: null