1 、引入依赖脚本
//ajaxForm 依赖脚本
脚本下载地址 http://download.csdn.net/detail/yjqyyjw/9488464
2、使用方法
//1、回调函数使用方法
$('#form1').ajaxForm(function() {
$('#output1').html("提交成功！").show();
});
$('#form1').ajaxSubmit(function() {
$('#output2').html("提交成功！").show();
});
//2、option对象使用方法
var ajax_option={
target: '#output', //把服务器返回的内容放入id为output的元素中
beforeSubmit: showRequest, //提交前的回调函数
success: showResponse, //提交后的回调函数
url: url, //默认是form的action， 如果申明，则会覆盖
type: type, //默认是form的method（get or post），如果申明，则会覆盖
dataType: null, //html(默认), xml, script, json...接受服务端返回的类型
clearForm: true, //成功提交后，清除所有表单元素的值
resetForm: true, //成功提交后，重置所有表单元素的值
timeout: 3000 //限制请求的时间，当请求大于3秒后，跳出请求
};
//formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery对象，封装了表单的元素
//options: options对象
function showRequest(formData, jqForm, options){
var queryString = $.param(formData); //name=1&address=2
var formElement = jqForm[0]; //将jqForm转换为DOM对象
var address = formElement.address.value; //访问jqForm的DOM元素
return true; //只要不返回false，表单都会提交,在这里可以对表单元素进行验证
};
function showResponse(responseText, statusText){
//dataType=xml
var name = $('name', responseXML).text();
var address = $('address', responseXML).text();
$("#xmlout").html(name + " " + address);
//dataType=json
$("#jsonout").html(data.name + " " + data.address);
};
$('#form1').ajaxSubmit(ajax_option);
3、实战
html 部分
js 部分
var ajax_option={
url:"gfan_yyq!images_edit_save.action",
success:function(data){
var result = $.parseJSON(data);
if (result.success) {
var index = parent.layer.getFrameIndex();
var parentWin = parent;
parent.layer.msg(result.message, 1, 1, function(){
parentWin.layer.close(index);
parentWin.window.location.href=parentWin.window.location.href;
});
} else {
parent.layer.msg(result.message, 1, 3);
}
}
};
$('#save').click(function(){
alert(123);
$('#from1').ajaxSubmit(ajax_option);
});
$('#cancel').click(function(){
var index = parent.layer.getFrameIndex();
parent.layer.close(index);
});
4、总结ajaxSubmit 和ajaxForm区别
ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit 马上由AJAX来提交表单。你可以在任何情况下进行该项提交。