首页 > 代码库 > jQuery的ajax的form提交方法应用
jQuery的ajax的form提交方法应用
1.如果不用ajax的form提交，就必须把表单的每一条数据进行获取，并提交给action进行处理。这样做比较麻烦，现在用了jQuery的easyui，使用封装好的ajax的form提交。脚本代码如下：
//提交表单
function sysusersave(){
if($.formValidator.pageIsValid()){//校验表单输入信息是否合法
//使用jquery的ajax from提交，指定from的id和回调方法，提交的url使用提from中的action，参数为空，传递JSON字符串（去掉也不报错）
jquerySubByFId('sysusereditform',sysusersave_callback,null,"json");
}
}
//from提交的回调方法,data是提交的返回的数据
function sysusersave_callback(data){
message_alert(data);
}注意：上面的回调函数，是action处理后，返回JSON的数据传给了参数data。
上面函数具体的实现（没有封装的代码）：要传递四个参数
/*
*form提交(post方式)
*
*formId form Id
*callbackfn 回调函数名(要求函数必须有参数且不能多与两个,一个参数时参数为响应文本,两个参数时第一个参数为响应文本)
*param 回调函数参数(如果为null,那么调用一个参数的回调函数,否则调用两个参数的回调函数)
*/
function jquerySubByFId(formId,callbackFn,param,dataType){
var formObj = jQuery("#" + formId);
var options = {
dataType: ("undefined"!=dataType && null!=dataType)?dataType:"json",
success: function(responseText) {
if(param === null){
callbackFn(responseText);
}else{
callbackFn(responseText,param);
}
}
};
formObj.ajaxSubmit(options);
}2.校验表单输入信息是否合法：使用的是jQuery easyui的内置校验器，如下 ，列举出来的对用户账号进行的校验：
$(function (){
/******表单校验*************/
$.formValidator.initConfig({
formID : "sysusereditform",
theme : "Default",
onError : function(msg, obj, errorlist) {
//alert(msg);
}
});
//用户账号
$("#sysuser_userid").formValidator({
onShow : "",
onCorrect:" "
}).inputValidator({
min : 1,
max : 20,
onError : "请输入用户账号(最长10个字符)"
});
});校验的具体方法：
//====================================================================================================
// [插件名称] jQuery formValidator
//----------------------------------------------------------------------------------------------------
// [描 述] jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面的分离。对一个表
// 单对象，你只需要写一行代码就可以轻松实现20种以上的脚本控制。现支持一个表单元素累加很多种
// 校验方式,采用配置信息的思想，而不是把信息写在表单元素上，能比较完美的实现ajax请求。
//----------------------------------------------------------------------------------------------------
// [作者网名] 猫冬
// [邮 箱] wzmaodong@126.com
// [作者博客] http://wzmaodong.cnblogs.com
// [QQ群交流] 74106519
// [更新日期] 2011-05-22
// [版 本 号] ver4.0.1
//====================================================================================================
(function($) {
$.formValidator =
{
//全局配置
initConfig : function(controlOptions)
{
var settings =
{
debug:false, //调试模式
validatorGroup : "1", //分组号
alertMessage:false, //是否为弹出窗口提示模式
validObjects:[], //参加校验的控件集合
ajaxObjects:"", //传到服务器的控件列表
forceValid:false, //控件输入正确之后，才允许失去焦点
onSuccess: function() {return true;}, //提交成功后的回调函数
onError: $.noop, //提交失败的回调函数
submitOnce:false, //页面是否提交一次，不会停留
formID:"", //表单ID
submitButtonID:"", //提交按钮ID
autoTip: false, //是否自动构建提示层
tidyMode:false, //精简模式
errorFocus:true, //第一个错误的控件获得焦点
wideWord:true, //一个汉字当做2个长度
status:"", //提交的状态：submited、sumbiting、sumbitingWithAjax
submitAfterAjaxPrompt : "当前有数据正在进行服务器端校验，请稍候", //控件失去焦点后，触发ajax校验，没有返回结果前的错误提示
validCount:0, //含ajaxValidator的控件个数
ajaxCountSubmit:0, //提交的时候触发的ajax验证个数
ajaxCountValid:0, //失去焦点时候触发的ajax验证个数
inIframe:false
};
controlOptions = controlOptions || {};
$.extend(settings, controlOptions);
//如果是精简模式，发生错误的时候，第一个错误的控件就不获得焦点
if(settings.tidyMode){settings.errorFocus=false};
//如果填写了表单和按钮，就注册验证事件
if(settings.formID!=""){
$("#"+settings.formID).submit(function(){return $.formValidator.bindSubmit(settings);});
}
else if(settings.submitButtonID!="")
{
$("#"+settings.submitButtonID).click(function(){return $.formValidator.bindSubmit(settings);});
}
$('body').data(settings.validatorGroup, settings);
},
//调用验证函数
bindSubmit : function(settings)
{
if (settings.ajaxCountValid > 0 && settings.submitAfterAjaxPrompt != "") {
alert(settings.submitAfterAjaxPrompt);
return false;
}
return $.formValidator.pageIsValid(settings.validatorGroup);
},
//各种校验方式支持的控件类型
sustainType : function(id,setting)
{
var elem = $("#"+id).get(0);
var srcTag = elem.tagName;
var stype = elem.type;
switch(setting.validateType)
{
case "InitValidator":
return true;
case "InputValidator":
return (srcTag == "INPUT" || srcTag == "TEXTAREA" || srcTag == "SELECT");
case "CompareValidator":
return ((srcTag == "INPUT" || srcTag == "TEXTAREA") ? (stype != "checkbox" && stype != "radio") : false);
case "AjaxValidator":
return (stype == "text" || stype == "textarea" || stype == "file" || stype == "password" || stype == "select-one");
case "RegexValidator":
return ((srcTag == "INPUT" || srcTag == "TEXTAREA") ? (stype != "checkbox" && stype != "radio") : false);
case "FunctionValidator":
return true;
}
},
//如果validator对象对应的element对象的validator属性追加要进行的校验。
appendValid : function(id, setting )
{
//如果是各种校验不支持的类型，就不追加到。返回-1表示没有追加成功
if(!$.formValidator.sustainType(id,setting)) return -1;
var srcjo = $("#"+id).get(0);
//重新初始化
if (setting.validateType=="InitValidator" || srcjo.settings == undefined ){srcjo.settings = new Array();}
var len = srcjo.settings.push( setting );
srcjo.settings[len - 1].index = len - 1;
return len - 1;
},
//设置显示信息
setTipState : function(elem,showclass,showmsg)
{
var initConfig = $('body').data(elem.validatorGroup);
var tip = $("#"+elem.settings[0].tipID);
if(showmsg==null || showmsg=="")
{
tip.hide();
}
else
{
if(initConfig.tidyMode)
{
//显示和保存提示信息
$("#fv_content").html(showmsg);
elem.Tooltip = showmsg;
if(showclass!="onError"){tip.hide();}
}
else
{
tip.show().removeClass().addClass( showclass ).html( showmsg );
}
}
},
//把提示层重置成原始提示(如果有defaultPassed,应该设置为onCorrect)
resetTipState : function(validatorGroup)
{
if(validatorGroup == undefined){validatorGroup = "1"};
var initConfig = $('body').data(validatorGroup);
$.each(initConfig.validObjects,function(){
var elem = this.get(0);
var setting = elem.settings[0];
var passed = setting.defaultPassed;
$.formValidator.setTipState(elem, passed ? "onCorrect" : "onShow", passed ? setting.onCorrect : setting.onShow);
});
},
//设置错误的显示信息
setFailState : function(tipID,showmsg)
{
var tip = $("#"+tipID);
tip.removeClass().addClass("onError").html(showmsg);
},
//根据单个对象,正确:正确提示,错误:错误提示
showMessage : function(returnObj)
{
var id = returnObj.id;
var elem = $("#"+id).get(0);
var isValid = returnObj.isValid;
var setting = returnObj.setting;//正确:setting[0],错误:对应的setting[i]
var showmsg = "",showclass = "";
var intiConfig = $('body').data(elem.validatorGroup);
if (!isValid)
{
showclass = "onError";
if(setting.validateType=="AjaxValidator")
{
if(setting.lastValid=="")
{
showclass = "onLoad";
showmsg = setting.onWait;
}
else
{
showmsg = setting.onError;
}
}
else
{
showmsg = (returnObj.errormsg==""? setting.onError : returnObj.errormsg);
}
if(intiConfig.alertMessage)
{
if(elem.validValueOld!=$(elem).val()){alert(showmsg);}
}
else
{
$.formValidator.setTipState(elem,showclass,showmsg);
}
}
else
{
//验证成功后,如果没有设置成功提示信息,则给出默认提示,否则给出自定义提示;允许为空,值为空的提示
showmsg = $.formValidator.isEmpty(id) ? setting.onEmpty : setting.onCorrect;
$.formValidator.setTipState(elem,"onCorrect",showmsg);
}
return showmsg;
},
showAjaxMessage : function(returnObj)
{
var elem = $("#"+returnObj.id).get(0);
var setting = elem.settings[returnObj.ajax];
var validValueOld = elem.validValueOld;
var validvalue = http://www.mamicode.com/$(elem).val();>
使用这些已经写好的方法来处理表单数据，要导入对应的js库
以下HTML的代码是把项目中应用到的js库引入到程序中：
<script type="text/javascript" src=http://www.mamicode.com/"${baseurl}js/jquery-1.4.4.min.js"></script>>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。