基于Ajax表单提交及后台处理简单的应用

首先先说下表单提交吧，要提交表单那么就得先收集表单数据（至于验证这个我就不说了，要说留下下次吧）,有了jquery取个html的值还是简单$("xxid").val()等就完了，但如果一张表单收集的数据很多，像这样的表单又有很多张，那用此方法肯定麻烦死，并且容易眼花录错。所以，我们就可以简单的来定义一个收集规则，如在要回传到服务器的数据表单控件，可以做个标记，到时取的时候把这些标记的数据一起取回去。

 就拿最简单的文体输入做例子吧<input type="text" id="txtcode" name="txtcode" datafield="Code" style="width: 200px" />我们加一个"datafield"属性，存入的值为对应服务器相关类的属性名。有了这标记前台取数据就好办了。

我们可以定个通用方法如下面代码

getFormData: function(formid) {        var data = {};    //获取TEXT文件内容    $("#" + formid + " input[type=text]").each(function(i, o) {      var jo = $(o);      if (jo.attr("datafield")) {        var str = jo.val();        str = str.replace(" ", "");        if (str !== "") {                    data[jo.attr("datafield")] = jo.val();        }      }    });    return data;}

这里就是一个简单的获取表单里面所有text文本，并放入到一个data对象里面，至于其它表单控件值怎么取我就不多说了，原理差不多。

那么接下回就是把数据发到服务器上了，我这里就直接用jquery带的ajax。

var save = function(sender) {           $(sender).prop("disabled", true); //禁用按钮，防止重复发送      var data = getFormData("form1");      var jsonobj = { jsondata: data };      var textdata = 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("保存成功！");                     }          else if (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()的子集。那样这样就好办了。属性集怎么取？反射。这么多类到底是哪个？不管它，泛型解决。