您的位置:首页 > Web前端 > JQuery

jQuery.form开发手记

2016-02-24 03:42 585 查看
介绍
使用
API说明
ajaxForm
ajaxSubmit
fieldSerialize
resetForm
clearForm
clearFields
参数示例

一般情况下其实提交表单我们将数据
$("form").serialize()
序列化之后用
$.ajax
$.post
就可以实现,但是jQuery自带的方法仅支持异步提交数据,但不支持文件上传,除非我们自己用XMLHttpRequest写一个方法。

好在
jquery.form.js
自己实现了一套ajax的方法,支持异步文件上传并获取响应结果,这才是我使用jQuery.form的主要原因。

当然,小文件你也可以将其base64序列化,以字符串方式回传服务器,而不使用这个插件

介绍

jQuery Form插件能够让我们非常方便的实现form表单的AJAX异步提交,并且可以完全自定义提交的数据!

官网:http://plugins.jquery.com/form/

github:https://github.com/malsup/form

文档:http://jquery.malsup.com/form/

使用

1、引用JS

<script src="./jquery.js"></script>


<script src="./jquery.form.js"></script>


2、声明表单

<formid="myForm"action="comment.php"method="post">


Name: <inputtype="text"name="name"/>


Comment: <textareaname="comment"></textarea>


<inputtype="submit"value="Submit Comment"/>


</form>


3、ajax提交

$(document).ready(function(){


// bind 'myForm' and provide a simple callback function


$('#myForm').ajaxForm(function(){


alert("Thank you for your comment!");


});


});


API说明

ajaxForm

并不会提交Form,在document的ready函数中通过给指定form添加事件监听使其成为AJAX异步表单。

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


ajaxSubmit

立即通过AJAX提交表单,一般是用来替换绑定表单的提交事件

//绑定submit事件


$('#myFormId').submit(function(){


//异步提交


$(this).ajaxSubmit();


// return false 用来阻止浏览器的提交与跳转


returnfalse;


});


fieldSerialize

和$.serialize大同小异,序列化表单数据

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


resetForm

将表单恢复到初始状态。

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


clearForm

清除表单元素。该方法将所有的text、password、textarea置空,清除select元素中的选定,以及所有radio按钮和checkbox按钮重置为非选定状态。

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


clearFields

清除字段元素。只有部分表单元素需要清除时方便使用。

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


参数示例

var options = {
data: { key1: 'value1', key2: 'value2' }, //连同表单一起提交的额外数据
target:        '#output1',   // 把服务器返回的内容放入id为output的元素中
beforeSerialize: function($form, options) {
// return false to cancel submit
},
beforeSubmit:  showRequest,  // pre-submit callback
success:       showResponse,  // post-submit callback
error: function(){},//在错误中调用的回调函数。

//other available options:
url:       url        //默认是form的action,如果申明,则会覆盖
type:      type        // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖
dataType:  null       // null(默认)、xml、script、json接受服务器端返回的类型
clearForm: true        // 成功提交后,清除所有表单元素的值
resetForm: true        // 成功提交后,重置所有表单元素的值

//超时时间
timeout:   3000
};

// pre-submit callback
function showRequest(formData, jqForm, options) {
// The array of form data takes the following form:
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);

// jqForm is a jQuery object encapsulating the form element.  To access the
// DOM element for the form do this:
// var formElement = jqForm[0];

alert('About to submit: \n\n' + queryString);

// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}

// post-submit callback
function showResponse(responseText, statusText, xhr, $form)  {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property

// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property

// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}


来自为知笔记(Wiz)



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: