jQuery Form一款简单强大的AJAX表单提交插件

使用方法：

载入必要CSS、JS文件

<script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js">script>
<script type="text/javascript" src="jquery.form.min.js">script>

接下来看一个初始配置和AJAX的一些操作

$(function(){
	var options = { 
        beforeSubmit:  showRequest,  // 提交表单前
        success:       showResponse,  // 处理完成之后
		resetForm: true, 
		dataType:  'json' 
    }; 
 
    // 提交表单 
    $('#my_form').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    }); 
});
// 提交并判断表单
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);
} 

再来看一下post.php：

$arr = $_POST;
$arr['msg']=1;
echo json_encode($arr); //将PHP数组转换成JSON数据格式

处理表单数据这边就很简单了，无非就是接收数据，处理数据，返回数据了。

ajaxSubmit()还有很多的选项设置，下面列一些比较常用的：

jquery.form还有很多其他的方法，这里就不一一介绍了。以后有机会再发一些其他的