AjaxForm

Control jquery.fn.ajaxform

定义于文件：  jquery.form.js

允许你轻易的提交表单。

基本语法

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

参数说明

• target : String
• (可选参数)更新到服务器响应的元素标识符，这个值可以指定为一个JQUERY选择器字符串，一个JQUERY对象，或一个DOM元素。
• url : String
• (可选参数)将要提交form数据URL，默认值：form动作属性。
• type : String
• (可选参数)'get' 或 'post'，override for form's 'method' attribute
• dataType : String
• (可选参数) 'xml', 'script', or 'json' (期待服务器响应类型)
• clearForm : boolean
• (可选参数) true，提交成功后清除表单所有字段
• resetForm : boolean
• (可选参数) 提交成功后重置表单.
• beforeSubmit : function
• (可选参数) 提交前的callback
• success : function
• (可选参数) 提交成功后的callback
• semantic : boolean
• (可选参数) 是否严格语义提交
• iframe : null
• (可选参数) 是否表单提交target总是iframe.
• timeout : number
• (可选参数) 超时

依赖关系

jquery.js

 

相关方法

相关方法	所属类
fieldValue() 返回匹配元素的值到一个数组	jquery.ajaxform
ajaxSubmit([option]) 通过增加所有需要事件监控器 实现ajax提交表单

--------------------------------------------------------------------------------------------------

HTML代码：

<form method="post" action="" id="ajaxform">
            <div class="bbit-form bbit-infocontainer">
                <h3>
                    人员信息登记</h3>
                <ul>
                    <li>
                        <label for="name">
                            姓名</label>
                        <input type="text" id="name" name="name"></li>
                    <li>
                        <label>
                            性别</label>
                        <input type="radio" id="gender_0" value="男" name="gender">
                        <label for="gender_0">
                            男</label>
                        <input type="radio" id="gender_1" value="女" name="gender">
                        <label for="gender_1">
                            女</label>
                    </li>
                    <li>
                        <label for="birthday">
                            生日</label>
                        <input type="text" maxlength="10" readonly="readonly" name="birthday" style="width: 100px;" id="birthday" class="bbit-dp-input"><img align="middle" alt="" src="/themes/shared/images/s.gif" class="picker">
                    </li>
                    <li>
                        <label for="vocation">
                            职业</label>
                        <select id="vocation" name="vocation">
                            <option value="PG">软件工程师</option>
                            <option value="PM">项目经理</option>
                            <option value="OA">质量控制</option>
                            <option value="BOSS">老板</option>
                        </select>
                    </li>
                    <li>
                        <label>
                            爱好</label>
                        <label>
                            <input type="checkbox" id="Hobbies_0" value="体育" name="hobbies">
                            体育</label>
                        <label>
                            <input type="checkbox" id="Hobbies_1" value="音乐" name="hobbies">
                            音乐</label>
                        <label>
                            <input type="checkbox" id="Hobbies_2" value="电子游戏" name="hobbies">
                            电子游戏</label>
                    </li>
                    <li>
                        <label for="remark">
                            备注</label>
                        <textarea class="bbit-textbox-TextArea" rows="6" cols="40" id="remark" name="remark"></textarea></li>
                    <li>
                        <input type="submit" value="提交">
                    </li>
                </ul>
            </div>
</form>

Jquery 代码：

//参数配置

var o = {

dataType: "json",

url: "formHandler.ashx",

type: "post",

beforeSubmit: beforeSubmit, 

success: ProcessJson

};

//调用方式

$("#ajaxform").ajaxForm(o);

// 提交前的callback函数

function beforeSubmit(formData, jqForm, options) {

var queryString = $.param(formData); alert('提交之前数据被序列化成：\n\n' + queryString); return true;

} //提交成功后的callback函数 function ProcessJson(person) { var ret = "服务器端接收到的数据Person类:" ret += "\r\nname=" + person.name; ret += "\r\ngender=" + person.gender; ret += "\r\nbirthday=" + person.birthday; ret += "\r\nvocation=" + person.vocation; ret += "\r\nhobbies=" + person.hobbies; ret += "\r\nremark=" + person.remark; alert(ret); }