在jQuery框架中，有着很多的小组件，这些小组件每一个都有自己的独特的作用，下面小编就给大家讲解一下jQuery中ajaxfrom的应用。

jQueryform是jQuery中的一个插件，使用它我们需要定义文件 jquery.form.js。

jQueryform基本语法

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

参数：

target : (可选参数)更新到服务器响应的元素标识符，这个值可以指定为一个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(可选参数) 超时

jQueryform方法：

fieldValue()

返回匹配元素的值到一个数组

ajaxSubmit([option])

通过增加所有需要事件监控器 实现ajax提交表单

下面是关于ajaxform的功能实现例子：

/* auto submit option*/
$('#quicktools').change(function(){
$('#formAjax').submit();
  });
function ajaxfun()
  {
$('#formAjax').ajaxForm({
beforeSubmit: function(arr, $form, options) {
var checked_id = $('input[type=checkbox][name=id\[\]]:checked').length;
if(checked_id == 0)
{
alert('请选择一个要操作的数据');
return false;
}
var actval = $("#quicktools").val();
if( actval == 'edit')
{
if(checked_id == 1)
{
$('#formAjax').unbind();
$('#formAjax').submit();
}else {
alert('编辑操作只能选择一个数据.');
return false;
}
}else if( actval == 'add')
{
$('#formAjax').unbind();
$('#formAjax').submit();
}else if( actval == 'del' || actval == 'delavatar' || actval == 'unlock' || 
actval == 'deldata' || actval == 'ban' )
{
if(!opt)
{
//optverlay();
return false;
}
}
//$('#formAjax').unbind();
},
success: function(data)
{
var obj = data ; //('(' + data + ')');
if(obj.status)
{
//self.location= "{:U('/supersystem/setauth')}";
$(".errorbox p:first").text(obj.info);
$(".errorbox p").css('color','#00FF00');
opt = 0;
if(obj.status == 2) setTimeout(function(){ window.location.reload() 
},600);
if(obj.status == 3) setTimeout(function(){ self.location= obj.data.url 
},600);
//setTimeout(function(){ self.location= "{:U('/supersystem/setauth')}" 
},1000);
}else{
$(".errorbox p:first").text(obj.info);
$(".errorbox p").css('color','#FFE808');
$("#bansubmit").removeAttr('disabled');
$( "#dialog-confirm" ).dialog( "close" );
opt = 0;
}
}
});
/* global ajax effects
$("#formAjax").ajaxStart(function(){
$(".errorbox p:first").text('正在增加配置请稍后...');
$(".errorbox p").css('color','#00CC1F');
$("#bansubmit").attr('disabled','disabled');
});
show Overlay */
}
function optverlay()
{
var delconfirm = $( ".del-confirm" )
delconfirm.click(function(){
var uid = $(this).attr('data-id');
$( "#dialog-confirm" ).dialog({
resizable: false,
modal: true,
buttons: {
"确定": function() {
$.post("{:U('/supertraffic/delip')}", { id: uid },
function(data) {
if(data.status)
{
setTimeout(function(){ window.location.reload() },300);
}else{
alert("提示信息: " + data);
}
});
$( this ).dialog( "close" );
},
"取消": function() {
$( this ).dialog( "close" );
}
}
});
})
}

以上就是今天的所有内容，跟过相关内容请持续关注本站。