基于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()的子集。那样这样就好办了。属性集怎么取?反射。这么多类到底是哪个?不管它,泛型解决。

说下这么多,贴下核心代码

public static T1 UpdateObjectByDic<T1>(T1 scrobj, IDictionary<string, string> sourceobject, bool ignoreCase)
     where T1 : new()
    {
      T1 result = scrobj;
      PropertyInfo[] pifresults = typeof(T1).GetProperties();
      foreach (var dic in sourceobject)
      {
        foreach (PropertyInfo pifresult in pifresults)
        {
          if (string.Compare(dic.Key, pifresult.Name, ignoreCase) == 0)
          {
           pifresult.SetValue(result, ChangeType(dic.Value, pifresult.PropertyType), null);
            break;
          }
        }
      }
      return result;
    }

    public static Object ChangeType(object value, Type targetType)
    {
      Type convertType = targetType;
      if (targetType.IsGenericType && targetType.GetGenericTypeDefinition().Equals(typeof(Nullable<>)))
      {
        NullableConverter nullableConverter = new NullableConverter(targetType);
        convertType = nullableConverter.UnderlyingType;

      }
      return Convert.ChangeType(value, convertType);
    }

我这里T1 scrobj是把更新做在一起,如添加表单就传个new的对象进来,如果是更新把单就把原表单数据传进来。这里顺带说下ChangeType方法,其它就是数据类里有些属性是nullable的(int? DateTime?等)传统的Convert.ChangeType会有异常所以就简单改了下,ignoreCase就是属性(前台那个datafield对应的值)查找是否处理大小写(一般是不管大小写的,要管大小写相信会被前台口水流淹死)。

这样后台数据处理核心就完了,调用部分代码也贴下

[WebMethod(EnableSession = true)]
    public static string Save(Dictionary<string, string> jsondata)
    {
      string result = "0";
      Model.Project pro = ConvertHandle.UpdateObjectByDic< Model.Project>(jsondata,new Model.Project,true);
      pro.CreatorID = BLL.Sys_User.GetCurUser().ID.ToString();
      pro.CreatorName = BLL.Sys_User.GetCurUser().Name;
      prohandle.Insert(pro);
      result = "1";
      return result;
    }

这里就是后台具体处理方法调用的核心使用了,prohandle.Insert(pro)将类存入数据库,pro.CreatorID,pro.CreatorName为项目的一些其它信息,这些就不说了。到这里一个表单前台数据收集,后台处理,除了保存那块以外,就都算完了,呵呵。

文章最后说下,这里只是个简单应用,像我说的这前台收集,很多前台js框架都已经早做了,考虑方面也比我这个全面得多,后台处理我这是基于我这种前台简单收集弄的,很多第三方框架都有完整的体系了,但我这里说的只是一种简单的思路,当你一时没有那么多控件时是否能把这一条路简单走通实现。当然我强烈建议不要重复造轮子,但要一定要明白轮子的核心作用和原理。

以上这篇基于Ajax表单提交及后台处理简单的应用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Jquery.Form 异步提交表单的简单实例

    http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. 在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: 复制代码 代码如下: <form id="myForm" method="post" action="/Home/AjaxForm"><div>Name:<input id="username&qu

  • jQuery使用$.ajax提交表单完整实例

    本文实例讲述了jQuery使用$.ajax提交表单的方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • jquery实现ajax提交表单信息的简单方法(推荐)

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//后台对象接收名称 url: '/',//提交地址 postType: 'POST',//提交方式 dataType:

  • 提交表单最简单的AJAX程序分享

    复制代码 代码如下: function tijiao(){ $("#tijiaoanniu").val("提交中..."); $.ajax({ type:'POST', url:'action.php?type=reg', data:$("form").serialize(),//序列化表单里所有的内容 success: function(data){ alert("注册成功!"); window.location='/mem

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

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

  • jQuery实现表单动态加减、ajax表单提交功能

    对于前端开发,我的归类是分2种层次,首先第一种是基于前端架构上的开发,有一些后台开发的同事会瞧不起搞前端的,他们认为前端无非是画个页面嘛,这就有点夜郎自大了.现在我了解的一些前端框架基本分为3个主流框架:ReactJs,Vue,angularjs,前两个还是目前的主流趋势.第二种就是基于市面上的一些非主流工具包,比如BUI,FLatUI等,再结合自己的dom操作. 好了,废话不多说了,本篇文章主要讲怎么去实现表单动态加减的效果,花了一天时间搞出来,特来分享一下.本文主要分为两部分: 一是页面表单

  • layui表单提交到后台自动封装到实体类的方法

    第一次用layui,正在摸索中,今天在学习layui的时候在项目中看到一个表单提交,表单的数据传到后台是怎么自动封装到实体类里面的呢? 1.表单中的每一项的name属性值,必须和你所封装的实体中的属性名字一一对应,如果不相同就无法封装. 2.假如你的实体有5个属性,而需要前台输入的只有4个.(假如还有一个属性是id,这个不用输入,由后台给出).封装结束后,这个id属性的值就是null,你只需要自己再给它赋值就好了. 需要用到的包 jsp中的表单: 表单中的name属性的名称对应实体类的属性名称,

  • JQuery打造PHP的AJAX表单提交实例

    如果你对JQuery的基本语法还不是很熟悉,请搜索本站的教程资源.如果你对PHPMailer用法不熟悉,请查看本站的另一篇文章<使用PHPMailer类库发送电子邮件>. 第一步,创建一个表单HTML页面 这里,我们只展示主要的表单部分HTML结构代码: 复制代码 代码如下: <div id="contact_form"> <form name="contact" method="post" action="

  • Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    本教程基于Laravel 5.4 开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档. 做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单 验证 . 首先在 routes/web.php 中新增两条路由规则: Route::get('post/create', 'PostController@create'); Route::post('post/save', 'PostController@save'); 然后在项

  • ajax跨域(基础域名相同)表单提交的方法

    本文实例讲述了ajax跨域(基础域名相同)表单提交的方法.分享给大家供大家参考.具体如下: 1.要在做ajax提交的页面中添加如下js语句: <script type="text/javascript"> document.domain="基础域名"; </script> 2.ajax表单提交表单时可以使用一个jquery的一个表单插件jquery.form.js 使用语法如下: //fromPost为要收集数据的form表单的id $(&q

  • 微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

    本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理.分享给大家供大家参考,具体如下: 前面一篇结介绍了微信小程序函数定义.页面渲染.这里介绍form表单提交与后台php数据交互处理. [form表单提交] form.wxml: <form bindsubmit="formSubmit" bindreset="formReset"> <view> 昵称:<input type="text" name=&

  • jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • jQuery实现form表单基于ajax无刷新提交方法实例代码

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • 基于BootStrap与jQuery.validate实现表单提交校验功能

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 直接看demo:http://www.suchso.com/code/bootstrapvalidate/ 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极

随机推荐