基于Ajax表单提交及后台处理简单的应用
首先先说下表单提交吧，要提交表单那么就得先收集表单数据（至于验证这个我就不说了，要说留下下次吧）,有了jquery取个html的值还是简单$("xxid").val()等就完了，但如果一张表单收集的数据很多，像这样的表单又有很多张，那用此方法肯定麻烦死，并且容易眼花录错。所以，我们就可以简单的来定义一个收集规则，如在要回传到服务器的数据表单控件，可以做个标记，到时取的时候把这些标记的数据一起取回去。
就拿最简单的文体输入做例子吧<inputtype="text"id="txtcode"name="txtcode"datafield="Code"style="width:200px"/>我们加一个"datafield"属性，存入的值为对应服务器相关类的属性名。有了这标记前台取数据就好办了。
我们可以定个通用方法如下面代码
getFormData:function(formid){
vardata={};
//获取TEXT文件内容
$("#"+formid+"input[type=text]").each(function(i,o){
varjo=$(o);
if(jo.attr("datafield")){
varstr=jo.val();
str=str.replace("","");
if(str!==""){
data[jo.attr("datafield")]=jo.val();
}
}
});
returndata;
}
这里就是一个简单的获取表单里面所有text文本，并放入到一个data对象里面，至于其它表单控件值怎么取我就不多说了，原理差不多。
那么接下回就是把数据发到服务器上了，我这里就直接用jquery带的ajax。
varsave=function(sender){
$(sender).prop("disabled",true);//禁用按钮，防止重复发送
vardata=getFormData("form1");
varjsonobj={jsondata:data};
vartextdata=JSON.stringify(jsonobj);
$.ajax({
type:"POST",
contentType:"application/json;charset=utf-8",
url:"xxxxx.aspx/Save",
dataType:"json",
data:textdata,
success:function(msg){
if(msg.d=="1"){
document.form1.reset();
alert("保存成功！");
}
elseif(msg.d=="0"){
alert("保存失败！");
}
},
complete:function(jqXHR,textStatus){
$(sender).prop("disabled",false);//还原按钮
}
});
}
这里的"xxxxx.aspx/Save"就是ajax处理页面，其它就是一个webmethod。做了一下防止客户手速太快，服务处理太慢，重复点击的处理。
这样一个表单数据收集，回传服务器就完成了。这里使用json2.js的JSON.stringify方法统一将对象转成json字符，好处就是不用自己为拼json字符串而考虑json的格式问题，简单干净。
那么客户已经把数据收录好了，服务器也该要处理数据了。我们从前台来的数据的键(json的key)，不可能全部包括某个数据类的所有属性。并且数据类也有很多个，应该是哪一个类只有服务器才知道。所以这里我们就需要写一个帮助的转换类。这里又有问题，有可能数据类有很多个，难道我要为每一个类写一个方法，那不是个坑么？所以我们分析下客户端传到服务端上的数据格式，它是一组键值对且不会重复，那么就相当于一个Dictionary<string,string>,后台的类有很多种，那么至少我们能确定一个传入参数了，传出的就是相关类。相关类？到底是哪一类还只有到了具体后台收集方法里才知道。那么，整理一下思路，现在有一个Dictionary<string,string>要变成一个数据类，数据类到底是什么有什么样的属性？搞不清，但这个Dictionary<string,string>的key(键)可以看做是这个数据类属性集的一个子集，而这个Dictionary<string,string>的value(值)是这个数据类属性值toString()的子集。那样这样就好办了。属性集怎么取？反射。这么多类到底是哪个？不管它，泛型解决。
说下这么多，贴下核心代码
publicstaticT1UpdateObjectByDic<T1>(T1scrobj,IDictionary<string,string>sourceobject,boolignoreCase)
whereT1:new()
{
T1result=scrobj;
PropertyInfo[]pifresults=typeof(T1).GetProperties();
foreach(vardicinsourceobject)
{
foreach(PropertyInfopifresultinpifresults)
{
if(string.Compare(dic.Key,pifresult.Name,ignoreCase)==0)
{
pifresult.SetValue(result,ChangeType(dic.Value,pifresult.PropertyType),null);
break;
}
}
}
returnresult;
}
publicstaticObjectChangeType(objectvalue,TypetargetType)
{
TypeconvertType=targetType;
if(targetType.IsGenericType&&targetType.GetGenericTypeDefinition().Equals(typeof(Nullable<>)))
{
NullableConverternullableConverter=newNullableConverter(targetType);
convertType=nullableConverter.UnderlyingType;
}
returnConvert.ChangeType(value,convertType);
}
我这里T1scrobj是把更新做在一起，如添加表单就传个new的对象进来，如果是更新把单就把原表单数据传进来。这里顺带说下ChangeType方法，其它就是数据类里有些属性是nullable的（int?DateTime?等）传统的Convert.ChangeType会有异常所以就简单改了下，ignoreCase就是属性（前台那个datafield对应的值）查找是否处理大小写（一般是不管大小写的，要管大小写相信会被前台口水流淹死）。
这样后台数据处理核心就完了，调用部分代码也贴下
[WebMethod(EnableSession=true)]
publicstaticstringSave(Dictionary<string,string>jsondata)
{
stringresult="0";
Model.Projectpro=ConvertHandle.UpdateObjectByDic<Model.Project>(jsondata,newModel.Project,true);
pro.CreatorID=BLL.Sys_User.GetCurUser().ID.ToString();
pro.CreatorName=BLL.Sys_User.GetCurUser().Name;
prohandle.Insert(pro);
result="1";
returnresult;
}
这里就是后台具体处理方法调用的核心使用了,prohandle.Insert(pro)将类存入数据库，pro.CreatorID，pro.CreatorName为项目的一些其它信息，这些就不说了。到这里一个表单前台数据收集，后台处理，除了保存那块以外，就都算完了，呵呵。
文章最后说下，这里只是个简单应用，像我说的这前台收集，很多前台js框架都已经早做了，考虑方面也比我这个全面得多，后台处理我这是基于我这种前台简单收集弄的，很多第三方框架都有完整的体系了，但我这里说的只是一种简单的思路，当你一时没有那么多控件时是否能把这一条路简单走通实现。当然我强烈建议不要重复造轮子，但要一定要明白轮子的核心作用和原理。
以上这篇基于Ajax表单提交及后台处理简单的应用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。