基于mvc模式的jquery ajax异步请求

    

    在这边介绍在,net开发基于mvc三层架构模式的jquery ajax异步请求,这边的重点放在ajax请求上而mvc模式只是应用环境作为介绍。

    在jquery ajax中有好几种异步请求的方式有get 有post 还有发起带所有参数的Ajax请求,

     在这边我介绍其中的一种$.ajax(options)方式,相信其他的方式在看完本文之后你也可以会使用。

         $.ajax()有很多参数其中大部分是可选的,在这边介绍基本的经常使用到的参数,

                   url :字符串请求的url,

                   type :字符串要使用的http方式比如get,post,如果省略则默认为get,

                  data:字符串或数组,或者对象作为查询参数传入请求的值,

                 contentType: 指定请求内容的类型,

                  dataType: 请求数据的方式并说明了返回的数据类型,比较流行的是json

                 success和error即请求成功和失败要做的事情。

    mvc模式带给我们的好处是将结构与表现还有数据分离。这里将要介绍UI层,BLL层和DAL层:

                   1、表现层(UI):用户界面展示,即用户在使用一个系统的时候他的所见所得。

             2、业务逻辑层(BLL):针对具体问题的操作,也可以说是对数据层的操作,对数据业务逻辑处理。

            3、数据访问层(DAL):该层所做事务直接操作数据库,针对数据的增添、删除、修改、查找等。   

 好了以一个实际的登录界面为例:

       假定布置好的mvc模式下有

           (1)在BLL层下有文件夹LoginMng,LoginMng文件夹下有LoginMngBLL.cs文件。(建立文件夹的目的便于管理,尤其其大项目中尤为重要)

            (2)在DAL层下有文件夹LoginMng,LoginMng文件夹下有LoginMngDAL.cs文件。

           (3 )在UI层下存放js和css文件等等,并在js文件夹下有login.js文件。

            (4)所以该声明的也已经声明并引用。

    好了基本的做好了现在假设我们要完成登录操作,登录操作实现是将用户输入的账号密码和数据库中的数据比较如果存在一条一样的数据则表明用户存在,否则用户不存在。

         ok  1.  首先获得用户输入的数据:在js文件夹的login.js中代码

                   在用户单击登录按钮#userSubmit 时

    

       $("#userSubmit").click(function() {

         ///篇幅限制略去有效性验证///

         var userId = $("#userId").val();

        var userPassword =$("#userPassword").val();


        $.ajax({
            type: "Post",                http的请求方式post
            url: "login.aspx/loginM",           /数据请求的地址,在login.aspx.cs文件下的loginMng(string userIdM,string userPasswordM)函数
            data: "{'userIdM':'" + userId + "','userPasswordM':'" + userPassword + "'}",    //字符串查询数据传入请求的值
            contentType: "application/json; charset=utf-8",           //指定的请求内容类型
            dataType: "json",                  /以json数据方式请求数据
            success: function(data) {          数据传递成功
                //alert(data.d);
                if (data.d == true) {
                    //alert(userId + "," + userPassword);
                                    } else {
                    confirm("登录失败!");
                }
            },
            error: function(err) {        /数据请求失败
                alert(err.toString());
            }
        });

 

    2. 在之前提到的login.aspx.cs文件下的public partial class UI_login : System.Web.UI.Page{}函数中加入 函数:

      public static bool loginMng(string userIdM, string userPasswordM)
    {
        LoginMngBLL account = new LoginMngBLL();
        return account.loginBLL(userIdM, userPasswordM);   //将从login.js文件传入的数据传给BLL层的函数
    }


3.在BLL层中的LoginMngBLL文件中的public class LoginMngBLL {}函数中加入函数:

       public LoginMngBLL() { }      //构造函数


      public  static bool loginBLL(string userIdB,userPasswordB)

       {

             private LoginMngDAL account = new LoginMngDAL();

             return account.loginDAL(userIdB,userPasswordB);     

        }

4.在loginMngDAL文件中的 public class AccountMngDAL{}函数中加入:

     public LoginMngDAL() { }   构造函数

    private string comText = string.Empty;

    public bool loginDAL(string userIdD, string userPasswordD)
        {
            comText = @"select * from T_USER where userId= at userId and userPassword= at userPassword";   //请把at改为@并且不要空格,又是防止度娘
            SqlParameter[] cmdParams = { new SqlParameter("@userId", userIdD), new SqlParameter("@userPassword", userPasswordD) };
            DataTable dt = DbHelperSQL.Query(comText, cmdParams).Tables[0];
            try
            {
                if (dt.Rows.Count == 1)
                    return true;
                else
                    return false;
            }
            catch
            {
                return false;
            }
        }

注: 受篇幅和文章的主次影响本人略去了本该在js文件下就该做出的有效验证以及防止数据注入等代码,为的是更好的突出重点mvc和异步请求。如果你对有效性验证和数据注入不熟或者有需求的话可以通知本人帮助解决。

 

到此为此所有的都搞定了回顾下实例中第一点介绍了ajax的数据请求声明,第2到4点介绍了mvc中数据的传递,在正式书写时我书写顺序习惯也就是按上中顺序,并且每一个层次的函数和参数都用各自的结束标示符像BLL层的函数以BLL结尾而参数以B结尾,以此类推,这样的好处是显而易见的,除去结束标示符三个层次的函数名和参数名都是一样的,这样就不会和其他函数混淆。这里谈到的是书写规范的问题。

如果你对本博文有意见或者更好的实现方式谢谢请推荐你的博文,本人定将认真阅读。

如果你看到着了,谢谢,下次博客内容将是在团队合作中书写高质量的代码和代码规范,如果对本博主感兴趣的话谢谢关注!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

               
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值