新浦京81707con > 首页 > 澳门普金网站实例详解angularjs和ajax的结合使用,

原标题:澳门普金网站实例详解angularjs和ajax的结合使用,

浏览次数:71 时间:2019-09-04

那是一篇关于easyui协作ajax使用的小说,顺带介绍angularjs的选用以及令你感触到angularjs的威力。网络对此ajax 的文也是不以为奇 。作者就不直接从这种原生的httpxmlrequest 对象的js 写起了哈。看这种东西也存粹是掌握 高层的事物是怎么来的 原理是什么真正做的时候写这种东西 不是扯淡么 你叼你技巧牛逼整站的代码你全用这种写。html js 这种东西最开端设计出来就没怀念周密正是坨屎。幸亏今后有各个框架 能够扶持大家更易于的把那坨屎做的更鲜美。也幸而由于互连网工作生机勃勃的有利于 让浏览器端的那堆东西正在往统一规范的样子发展。

实例详解angularjs和ajax的三结合使用,angularjsajax

这是一篇有关easyui合作ajax使用的稿子,顺带介绍angularjs的使用以及令你感受到angularjs的威力。网络对此ajax 的文也是不可胜言 。笔者就不直接从这种原生的httpxmlrequest 对象的js 写起了哈。看这种东西也存粹是了然 高层的事物是怎么来的 原理是啥真正做的时候写这种东西 不是扯淡么 你叼你技能牛逼整站的代码你全用这种写。html js 这种事物最最初布置出来就没思量全面正是坨屎。幸好今后有各个框架 可以协助我们更易于的把那坨屎做的更加好吃。也辛亏由于网络工作如日方升的推进 让浏览器端的那堆东西正在往统一标准的大势发展。

作者们来确立一个webform页面 HelloAjaxNet.aspx。先说下ajax 这里小编利用英特网流传甚广的老大AjaxPro.2.dll  他的网址是 那是三个个体文章 ,很好用。

理之当然新的asp.net 里自带了服务端方法用webmethod 属性注脚  客户端pagemethods访谈的不二法门 ,各类对象也足以json数据化 ,效率跟上边一样的。微软自带的是aspx的codebehind 代码方法 必定要加static  ,至于webconfig 在新版的vs二零一一支出情况下毫不配置 要是是老的则新建ajax网址项目则webconfig自动弄好领会后服务端页面载入事件中 ScriptManager.GetCurrent(Page).EnablePageMethods = true; 客商端 必须有runat=server 的form 和 <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>  然后顾客端就足以pagemethods 的措施访问。

本身始终仍然认为上面十三分越来越好用 。关于他的规律笔者就非常少说了  ,通过页面载入时登记服务端对象 ,然后生成的html页面上就多了那般几句

 <script type="text/javascript" src="/ajaxpro/prototype.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/core.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/converter.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.StudentsInfo,WebApplication.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.Grad,WebApplication.ashx"></script>
 <script type="text/javascript" 
src="/ajaxpro/WebApplication.NewFolder.HelloAjaxNet,WebApplication.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.DataEntity,WebApplication.ashx"></script>

为是什么样呢 为的是引用一段js文件 ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx 

下一场您就清楚了噻 这段客供你举行客商端js调用的脚本 是服务端自动生成的 跟你 服务端的名字大同小异 然后您就能够貌似像在客商端回调服务端方法样的 没什么美妙的,大家珍视正是想行使她的这么些特点和json化数据的造福之处 来实现客商端服务端数据的无缝传递。

有关json数据的种类化 若是原先就唯有选用外界json库 或然微软自带的来进展手动深入分析:

服务端:

public string ServerProcerMethod(string stu)
     {
       //System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
       //StuInfo s= jsSerializer.Deserialize<StuInfo>(stu);

       System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
       List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu);
       if (s != null && s.Count > )
       {
         StuInfo stu= s[];
         StringBuilder sb = new StringBuilder();
         jsSerializer.Serialize(stu, sb);
         return sb.ToString();
       }
       else
         return null;
     }

客户端:

//javascript 字符串转json对象:
 var obj = JSON.parse(str);
 //javascript json 对象转字符串:
 JSON.stringify(obj);

有关AjaxPro.2.dll  和ajax.dll的关联 ,网络说他俩不平等 其实压根就是壹个人搞的吧 笔者擦 。请在上头网址下载ajaxpro 这些才是健全的版本

援用dll文件后需求陈设webconfig httphandler 成效便是让 上面包车型客车ashx央浼转到大家的 ajaxpro代码 ,进而让大家的顾客端js直接调用服务端方法调用成功。

<system.webServer>
   <directoryBrowse enabled="true"/>
   <handlers>
    <add verb="*" path="*.ashx" name="myhandler" type="AjaxPro.AjaxHandlerFactory,AjaxPro."/>
    <!--<add verb="POST,GET" path="ajax/*.ashx" name="myhandler" type="Ajax.PageHandlerFactory, Ajax" />-->
   </handlers>
  </system.webServer>

然后其余的自家就相当的少说了哈待会间接看服务端代码。

easyui 你就足以驾驭为一批扩张了的控件。就如jquery一样 你把js对象 原生的html控件用他的东西一包 然后就可以点得出她某些为你写好的法子 扶助您方便的拍卖数据。并且还会有私下认可的还足以的控件外观,那一点对于做集团处理类软件来说依旧真诚不错的,做任何的就不得不呵呵了。下载easyui的文书 放到项目中 并引进easyui 相关js和体裁文件 还会有jquery:

<script type="text/javascript" src="../jquery-easyui-../jquery.min.js"> </script>
   <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/default/easyui.css" />
   <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/icon.css" />
   <script type="text/javascript" src="../jquery-easyui-../jquery.easyui.min.js"></script>

然后 ,然后您就足以选取easyui了 就疑似easyui 首页 上介绍的那样 通过css样式 可能js代码 把原生html控件渲染成easyui控件

 <div class="easyui-dialog" style="width:px;height:px"
   data-options="
     title:'My Dialog',
     iconCls:'icon-ok',
     onOpen:function(){}">
   dialog content.
 </div>
 <input id="cc" style="width:px" />
 $('#cc').combobox({
   url: ...,
   required: true,
   valueField: 'id',
   textField: 'text'
 });

是的 非常便利。其实国内还会有众多js写的比较牛的 弄了一部分那样ui 那样ui 选来选去依然用那一个呢。用的最多的供给就是ajax服务端分页 ,大家来弄个呢。

咱俩先说下这一个easyui的datagrid  打她狗日的,客商端html放个table标签 :<table id="studb"></table> 然后用js这么一搞 $('#studb').datagrid() 他就给您渲染成easyui datagrid控件了 ,你能够在document.ready()时做那么些业务。咱们的数据表格是索要填写数据的 这个数据从哪来 突显怎么列 怎么分页 每页呈现多少条,这几个都以参数,怎么传进去。easyui比相当多地点都接到json对象形式的一坨参数 ,比方这一个datagrid:

 function bindDataToTb() {
       var keywordStr = $('#keyword').val();
       $('#studb').datagrid(
       {
         queryParams: { keyword: keywordStr },
         //url:"WebForm.aspx/BindData",
         toolbar: '#searchBar',
         pagination: true,
         pageNumber: ,
        singleSelect: true,
        pageSize: ,
        pageList: [, , ],
        loader: function (param, success, error) {
          var da = WebApplication.NewFolder.HelloAjaxNet.BindData(param.keyword, param.page, param.rows)
          if (da.value.rows == null) {
            success();
          }
          else
            success(da.value);
        },
        pagePosition: 'bottom',
        columns: [[
          { field: 'stuNo', title: 'Id', width: },
          { field: 'name', title: '名字', width: },
          { field: 'age', title: '年龄', width: },
          { field: 'loginName', title: '登录名', width: },
          { field: 'loginPwd', title: '密码', width: },
          { field: 'GradId', title: '班级Id', width: },
          { field: 'gradName', title: '班级', width: },
          {
            field: 'none', title: '操作', width: , formatter: function (value, row, index) {
              var btn = '<a class="editcls" href="#" onclick="delstuClick('   row.stuNo   ')">删除</a>';
              return btn;
            }
          }
        ]]
      });
     }

具体看loader 和columns ,loader用于定义你以什么样花样载入数据 定义了loader上边包车型地铁url就无需了。

本人那边的WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) 自然也是服务端的方法 用于检索数据的 。

至于这四个param.keyword, param.page, param.rows 是大家用来落实loader时 easyui这种设计方式故意暴光给大家的参数 方便大家应用。

param.keyword 是大家地方定义的 大家点搜索的时候供给往服务端传二个查询关键词 queryParams: { keyword: keywordStr }

param.page 是easyui自身的参数表示最近第几页 param.rows表示每页行数,每当你 点表格的 上一页 下一页 的时候 就能活动往loader 发翻页的参数 这些是活动的。

然后就从服务端获取数据填充表格 ,就是那样叁个职业进度。 还可能有colums 笔者就隐瞒了便是概念展现怎么列 和自定义列 那些很轻易看懂。

easyui控件有属性 方法,调用方法 的样式总算像那样 :$('#studb').datagrid('reload')  那就也正是调用了#studb这些表格控件的reload方法领悟后数据就能够自行刷新,每一种控件的切实可行见文书档案。

服务端数据管理我们依然用entityframework 笔者一般都用codefirst的方法 那东西跟她协和的mssql数据库 结合的很好 用起很方便。

服务端代码:

//查询(带分页
     [AjaxPro.AjaxMethod]
     public static WebApplication.DataEntity BindData(string keyword, int page, int rows)
     {
       //, ref int pageIndex, out int totalPage
       if (keyword == null)
         keyword = "";
       int pageIndex = ;
       int pageSize = ;
       int totalPage;
       if (page != )
         pageIndex = page;
       if (rows != )
         pageSize = rows;
       MyDb db = new MyDb();
       var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select new 
{ stuNo = studentInfo.stuNo, name = studentInfo.name, age = studentInfo.age, gradName = studentInfo.grad.gradName };
       //var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select studentInfo;
       totalPage = data.Count() % pageSize == ? data.Count() / pageSize : data.Count() / pageSize   ;
       if (pageIndex > totalPage)
         pageIndex = totalPage;
       else if (pageIndex < )
         pageIndex = ;
       //var dt = DataList<object>.Create(data.OrderBy(r => r.stuNo), new StudentsInfo(), pageIndex, pageSize).Value;
       object dt=null ;
       if(data.Count()>)
       dt= DataList<object>.Create(data.OrderBy(r => r.stuNo),
         new { stuNo = , name = "", age = , gradName = "" }, pageIndex, pageSize).Value;
       WebApplication.DataEntity result = new WebApplication.DataEntity();
       result.total = data.Count();
       result.rows = dt;
       return result;
     }

至于数据部分 和EF linq 分页那么些自身就不贴出来了 完整示例下载里面有。走走看吧 试试看吧 完全无刷新 服务端分页,以为棒棒哒

澳门普金网站 1 

索求那三个笔者也不想说了哈 正是重复载入下多少而已,删除是通过自定义 列的法门传id到js函数 然后调用服务端删除。然后要说下 录入作用 以及easyui自带 的表单验证也是一定便利的。

新建贰个div 作为弹出层 里面有二个录入音信的表格 种种html控件 只要写上easyui对应的体制  就活动渲染了 看弹出层的  class="easyui-dialog" data-options="closed:true,title:'新学生注册',modal:true"

实际很简短噻看字面意思就明白了 这个参数 都在easyui的文书档案里有。验证 也是在html成分上写data-options 就足以了, :

<div id="addBox" class="easyui-dialog" data-options="closed:true,title:'新学生注册',modal:true" style="width: px; height: px">
       <table class="auto-style">
         <tr>
           <td>学生姓名:</td>
           <td>
             <input id="stuname" class=" easyui-textbox" data-options="required:true,missingMessage:'必填项!',validType:'email',invalidMessage:'email格式不正确!'" type="text" /></td>
         </tr>
         <tr>
           <td>班级: </td>
           <td>
             <input class="easyui-combobox" id="grad" name="grad"
               data-options="valueField:'id',textField:'gradName',required:true,missingMessage:'必填项!'" /></td>
         </tr>
         <tr>
           <td>
             <input id="saveBtn" onclick="saveClick()" type="button" value="保存" /></td>
           <td>
             <input id="Button" type="button" onclick="$('#addBox').dialog('close');" value="关闭" /></td>
         </tr>
       </table>
     </div>

新建按键:

复制代码 代码如下:
 <a id="Button1" onclick="$('#addBox').dialog('open');" class="easyui-linkbutton">加新的</a>

留心千万别用button 成分  正是这种 <button>新加的</button>  那是个坑 ,折腾了深入。

保留按键调用 的js函数:

 //保存信息
     function saveClick() {
       var isvaliok = $("#addBox").form('validate');//包起来的需要提交信息的那个div框的id
       if (isvaliok == false) {
         $.messager.show({ title: '提示', msg: '请完善不正确的项后再提交', showType: 'show' });
         return;
       }
       var stu = {};
       stu.name = $("#stuname").val();
       stu.age = ;
       stu.GradId = $("#grad").combobox('getValue');
       stu.gradName = $("#grad").combobox('getValue');
       if (isNaN(stu.GradId))
         stu.GradId = null;
       var rst = WebApplication.NewFolder.HelloAjaxNet.addStu(stu);
       if (rst.value == "ok") {
         $('#addBox').dialog('close');
         $('#studb').datagrid('reload');
         var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value;
         $('#grad').combobox({ data: gradData }).combobox('reload');
       }
       else {
         $.messager.show({ title: '提示', msg: rst.error.Message   rst.value, showType: 'show' });
       }
     }

在意到了噻:

 var isvaliok = $("#addBox").form('validate');//包起来的需要提交信息的那个div框的id
       if (isvaliok == false) {
         $.messager.show({ title: '提示', msg: '请完善不正确的项后再提交', showType: 'show' });
         return;
       }

在easyui里进行表达相当粗略噻 只要在html代码里把验证格式定义好了 ,只要求传入多个最外侧容器控件的id $("#add博克斯").form('validate') 就自动帮我们证实了。何况分界面上还也许有提醒主旨自动放到第四个验证不通过的控件上去了 完全无需大家先导。

本来咱们在顾客端 document.ready()的时候 必须求绑定表格和下拉框的数据:

 $(function () {
       //页面初始化
       //载入表格数据
       bindDataToTb();
       //载入班级下拉框
       var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value;
       $('#grad').combobox({ data: gradData }).combobox('reload');
       var fd = new FormData();
     });

服务端保存的代码:

//添加
     [AjaxPro.AjaxMethod]
     public string addStu(StudentsInfo stu)
     {
       MyDb db = new MyDb();
       if(stu.GradId==null)
       {
         if (string.IsNullOrEmpty(stu.gradName) == false)
         {
           Grad grd = new Grad();
           grd.gradName = stu.gradName;

           Grad grdOld = db.grads.FirstOrDefault(r => r.gradName == stu.gradName);
           if(grdOld!=null)
           {
             return "类别已存在";
           }
           else
           {
             db.grads.Add(grd);
             stu.grad = grd;
           }
         }
       }
       db.Students.Add(stu);
       db.SaveChanges();
       return "ok";
     }

服务端代码  如若大家尚无那么些id的类别大家就认为那几个类型是新的 ,新加二个类型 然后立马绑定 perfect 完美 ,棒棒哒

澳门普金网站 2 

看起来是或不是有模有样。做处理类软件基本上能用。

诸如此比ui 那样ui当您供给自定义样式的时候开采怎么ui都以浮云,比方作者说的境内的写js相比牛的 就曾经造出来很多ui了 ,表格是极漂亮 很有力。 其实过多效果与利益你要么用不到 你想改还很困难 当然小编的js也是很菜的。 当你用到另一套ui 的时候又要纯熟它那一套 。作者只想用个简轻松单的自定义分页表格而已 或许像asp.net里的服务器控件repeat 流式布局 五个数据一行这种 你如何做。 依然要好出手吧。php里面有前端模板。

笔者那边只是简短从骨子里须要领会下angular的威力 php里面模板什么的都以浮云   新建三个webform  HelloAjaxNetAngular.aspx

专心这一个事例  服务端代码笔者一律用地点的丝毫都不会变 只是前面二个变了,angularjs 的主打观念是mvvm 情势 即是wpf里面这种重视属性 动态绑定 ,不知晓你们用过没 反正小编用过 感到就三个字 爽 ,做这种数据库平台程序 mfc winform 都以渣。

angularjs 的根底笔者就不介绍了 哈 直接从要求下手 做二个分页表格 加 新闻更新 作用

angularjs的网址是 这几个网站在本国也是看望不了的。一些息息相关的其余人的上学笔记有

左右这多个学科看了下对自身没 对自个儿没起到吗作用 感到跟嚼木渣样的 ,angularjs的观念尽管是mvvm 但是angularjs本人还是认为到晦涩难懂。

自家就在这么三个半懂不懂的场地下写了这些例子 ,全部的操作 大约都完全没有供给向jquery那样动dom 。真心感到到了他的兵不血刃。前端就贰个controller函数 管整个页面,怎么八个贰个的分 小编也不驾驭 只驾驭controller 跟html限定一样的树状结构。没在界定的html成分不可能访谈其controller里的 变量。

我们来看那么些controller 函数 ,笔者写的时候也没怎么感到 。正是深感很存粹 就只认为到三个东西存在 。业务逻辑在操作数据。 就疑似在写c#数量操作代码样:

 function myCtr($scope) {
       var mod = [{ name: 'xiang', age: }, { name: 'xiang', age: }, { name: 'xiang', age: }];
       $scope.data = mod;
       $scope.curobj = {};
       $scope.pageEntity = { total: , rows: , page: , pgmsg: '' }
       //初始化默认第一页
       $scope.initPage = function () {
         var firstPage = WebApplication.NewFolder.HelloAjaxNetAngular.BindData($("#txtkeyword").val(), $scope.pageEntity.page, $scope.pageEntity.rows);
         $scope.data = firstPage.value.rows;
         var pageEntityMod = {};
         pageEntityMod.total = firstPage.value.total;
         pageEntityMod.rows = $scope.pageEntity.rows;
         pageEntityMod.page = $scope.pageEntity.page;
         var totalpage = pageEntityMod.total % pageEntityMod.rows == ?
           parseInt(pageEntityMod.total / pageEntityMod.rows) :
           parseInt(pageEntityMod.total / pageEntityMod.rows)   ;
         pageEntityMod.pgmsg = "共 "   pageEntityMod.total   "条记录 每页 "   pageEntityMod.rows
             "条,共 "   totalpage   "页 ,当前第 "   pageEntityMod.page   "页";
         $scope.pageEntity = pageEntityMod;
         $scope.curobj = {};
       }
       //更新当前 选定的
       $scope.modifyCur = function () {
         var rst = WebApplication.NewFolder.HelloAjaxNetAngular.updateStu($scope.curobj)
         //刷新表格 当前选中信息 复原
         $scope.initPage();
         alert(rst.value);
       }
       //下翻页
       $scope.nextPage = function () {
         var totalpage = $scope.pageEntity.total % $scope.pageEntity.rows == ?
           parseInt($scope.pageEntity.total / $scope.pageEntity.rows) :
           parseInt($scope.pageEntity.total / $scope.pageEntity.rows)   ;
         var pagenewnum = $scope.pageEntity.page   ;
         if (pagenewnum <= totalpage)
           $scope.pageEntity.page  = ;
         $scope.initPage();
       }
       //上翻页
       $scope.previousPage = function () {
         var pagenewnum = $scope.pageEntity.page - ;
         if (pagenewnum >= )
           $scope.pageEntity.page -= ;
         $scope.initPage();
       }
       //搜索
       $scope.search = function () {
       }
       //选中一行
       $scope.del = function (sender, curobj) {
         //所有行的颜色还原//设置选中那一行的颜色
         var rows = $(sender.target).parent().parent().parent().find("tbody").find("tr");
         for (var i = ; i < rows.length; i  ) {
           $(rows[i]).css("background", "white");
         }
         $(sender.target).parent().css("background", "#ffed");
         $scope.curobj = curobj;
       }
       //首次先调用下 以获取第一页
       $scope.initPage();
     }

分界面部分:

<div ng-controller="myCtr" id="mygrid">
         <input id="txtkeyword" type="text" /><input ng-click="initPage()" type="button" value="搜索" />
         <br />
         <br />
         <div style="height: px">
           <table cellspacing="" border="" class="gridtable">
             <thead>
               <th width="px">name</th>
               <th width="px">age</th>
             </thead>
             <tbody ng-repeat="stu in data">
               <tr ng-click='del($event,stu)' style="background-color: white">
                 <td>{{stu.name}}</td>
                 <td>{{stu.age}}</td>
               </tr>
             </tbody>
           </table>

         </div>
         <div id="pager">
           <a href="#" ng-click="previousPage()">上一页</a> <a href="#" ng-click="nextPage()">下一页</a>
           {{pageEntity.pgmsg}}
         </div>

         <div>
           姓名:<input type="text" value="{{curobj.name}}" ng-model="curobj.name" /><br />
           年龄:<input type="text" value="{{curobj.age}}" ng-model="curobj.age" />
           <input id="Button" type="button" ng-click="modifyCur()" value="更改" />
         </div>
       </div>

看来自家自身搞了一个数目绑定函数 参照easyui里datagrid的loader。  第一回呼吁获得分页音讯后 小编随即把数量绑定到表格 你能够看到完全就像是做模板样的,然后起始化本人的分页控件。 在ng-click 的时候像原本同样触发顾客端单击 然后调用controller里的点子去立异数据 ,注意仅仅是基于业务逻辑去革新数据 其余的无需做。关于地点两段代码不知底的自动去看angularjs 入门和数量绑定 用不了10分钟,

是因为有wpf这种双向绑定机制,数据模型 数据更新了 页面内容自动跟着变。乃至你能够看来小编编辑上边文本框里的多寡的时候 都还没交给 上边表格的数据就随之变 因为她俩的数量是从同二个地点来的,瞅着模糊都深感是ajax哈。

澳门普金网站 3 

上面装有示例的类型源码下载 可直接运转,由于引了些外界库进来十兆险些放不下

说点后话

其实照互连网如此有利于发展下去的话 前端会联合 前端才是王道 到时候二个网页 正是三个种类 三个顾客端。 后端只承担数据和平安。 今后的什么html5不是大致都形成工业标准了么 有个别嵌入式设备都帮助

权且像微博里本身看到的有多少个讲的 前后端天人合一的那种mvc模式前端后端操作同一个model 前端更新属性了有一种体制自动就更新到后端长久化到数据库去了  或许后端更新model的某部属性 前端html页面包车型大巴值自动就变了。 不是说做不到 终归牛人这么多 ,小编认为至少还不安宁啊。

各个ui有easyui ligerui fineui miniui  Devexpress 还会有众多js框架 seajs requirejs JavaScriptMVC  backbone avalonjs knockout angular jquery jqueryui js真是屎一样的东西啊各样框架学都学不完

进而是软件行当蒸蒸日上 基于框架 和平台的本领太多了 不明白某样手艺不要紧能使用就行 ,然而作为一个技能职员 你至少得驾驭同样 或许一门手艺要不然正是个搬砖的 很可惜笔者基本还在搬砖的中途。写作业代码便是用一年的阅历混十年,写作业代码是她的专门的工作职业之余还得多少精神追究 切磋下作业的本质 ,只若是尚可的程序猿做这种数据库系统久了都会融洽搞点能快速支付的所谓的小框架 积存一些和谐的工具库 和阅历。

在办事上毫无有哪些偏见  只要他每日把作业代码写的出来 软件开垦也只是一门专业 你不是急流勇进 ,目标是缓和难题 不是转牛角尖。

小编自家对js是有一点点咳嗽的 js也很烂,当初设计这么些东西的时候就不到家给大家运用它导致了种种阻碍 ,不过你做web开荒又不得不用它。这里也并非对做前端的有何偏见 多谢那个前端吃的很透的人 像司徒正美那个高手 成立了那几个工具让大家更便于的去做到这几个网址前后相继。

那是一篇关于easyui协作ajax使用的稿子,顺带介绍angularjs的接纳以及让您感受到angularjs的威力。...

好久没写文了。那是一篇关于easyui协作ajax使用 的篇章, 顺带介绍angularjs的利用 以及令你感触到angularjs的威力。网络对此ajax 的文也是不计其数 。小编就不直接 从这种原生的httpxmlrequest 对象的js 写起了哈。 看那种东西也存粹是驾驭 高层的事物是怎么来的 原理是吗 真正做的时候写这种东西 不是扯淡么  你叼 你手艺牛逼 整站的代码你全用这种写。html js 这种东西最伊始规划出来就没思考周密正是坨屎。幸亏现在有各个框架 能够协理大家更易于的把那坨屎做的更加雅观味。也幸亏由于网络职业如日中天的推动 让浏览器端的那堆东西正在往统一标准的大方向前行。 好了 正题。

大家来创立一个webform页面 HelloAjaxNet.aspx。先说下ajax 这里本身利用英特网流传甚广的特别AjaxPro.2.dll  他的网址是 那是多少个私人商品房小说 ,很好用。

 

自然新的asp.net 里自带了服务端方法用webmethod 属性证明  客户端pagemethods访问的法子 ,种种对象也足以json数据化 ,功效跟上边同样的。微软自带的是aspx的codebehind 代码方法 必需求加static  ,至于webconfig 在新版的vs二〇一三付出情况下毫不配置 假使是老的则新建ajax网址项目则webconfig自动弄好领会后服务端页面载入事件中 ScriptManager.GetCurrent(Page).EnablePageMethods = true; 顾客端 必须有runat=server 的form 和 <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>  然后顾客端就足以pagemethods 的格局访谈。

大家来构造建设一个webform页面 HelloAjaxNet.aspx。先说下ajax 这里作者动用网络流传甚广的极度AjaxPro.2.dll  他的网址是 那是三个个体文章 ,很好用。

本人始终依旧感到上边拾壹分越来越好用 。关于他的原理我就十分的少说了  ,通过页面载入时登记服务端对象 ,然后生成的html页面上就多了如此几句

当然新的asp.net 里自带了 服务端方法用webmethod 属性注明 客商端pagemethods访谈 的主意 ,各个对象也足以json数据化 ,效率跟上边同样的。微软自带的是aspx的codebehind 代码方法 一定要加static  ,至于webconfig 在新版的vs二零一二支出条件下毫不配置 倘使是老的则新建ajax网址项目则webconfig自动弄好领悟后服务端页面载入事件中 ScriptManager.GetCurrent(Page).EnablePageMethods = true; 客户端 必需有runat=server 的form 和 <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>  然后顾客端就足以pagemethods 的办法访问。

 <script type="text/javascript" src="/ajaxpro/prototype.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/core.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/converter.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.StudentsInfo,WebApplication.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.Grad,WebApplication.ashx"></script>
 <script type="text/javascript" 
src="/ajaxpro/WebApplication.NewFolder.HelloAjaxNet,WebApplication.ashx"></script>
 <script type="text/javascript" src="/ajaxpro/WebApplication.DataEntity,WebApplication.ashx"></script>

自家始终依旧认为上边十二分更加好用 。关于她的原理作者就非常的少说了  ,通过页面载入时登记服务端对象 ,然后生成的html页面上就多了这么几句

为是怎样呢 为的是引用一段js文件 ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx 

1 <script type="text/javascript" src="/ajaxpro/prototype.ashx"></script>
2 <script type="text/javascript" src="/ajaxpro/core.ashx"></script>
3 <script type="text/javascript" src="/ajaxpro/converter.ashx"></script>
4 <script type="text/javascript" src="/ajaxpro/WebApplication1.StudentsInfo,WebApplication1.ashx"></script>
5 <script type="text/javascript" src="/ajaxpro/WebApplication1.Grad,WebApplication1.ashx"></script>
6 <script type="text/javascript" 
src="/ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx"></script>
7 <script type="text/javascript" src="/ajaxpro/WebApplication1.DataEntity,WebApplication1.ashx"></script>

然后你就知道了噻 这段客供你举行顾客端js调用的脚本 是服务端自动生成的 跟你 服务端的名字大同小异 然后您就足以貌似像在客商端回调服务端方法样的 没什么玄妙的,我们任重先生而道远正是想选拔他的这一个特点和json化数据的便利之处 来促成客商端服务端数据的无缝传递。

为是怎么呢 为的是援用一段js文件 ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx  

有关json数据的种类化 尽管原先就唯有选用表面json库 或然微软自带的来展开手动剖判:

然后您就知晓了噻 这段客供你进行客商端js调用的脚本 是服务端自动生成的 跟你 服务端的名字千篇一律 然后你就足以貌似像在顾客端回调服务端方法样的 没什么美妙的,大家首要正是想利用她的这几个特点和json化数据的有益之处 来兑现顾客端服务端数据的无缝传递。

服务端:

至于json数据的类别化 假使原先就唯有应用表面json库 或许微软自带的来开展手动深入分析:

public string ServerProcerMethod(string stu)
     {
       //System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
       //StuInfo s= jsSerializer.Deserialize<StuInfo>(stu);

       System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
       List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu);
       if (s != null && s.Count > )
       {
         StuInfo stu= s[];
         StringBuilder sb = new StringBuilder();
         jsSerializer.Serialize(stu, sb);
         return sb.ToString();
       }
       else
         return null;
     }

服务端:

客户端:

 1 public string ServerProcerMethod4(string stu)
 2         {
 3             //System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
 4             //StuInfo s= jsSerializer.Deserialize<StuInfo>(stu);
 5 
 6             System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
 7             List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu);
 8             if (s != null && s.Count > 0)
 9             {
10                 StuInfo stu2= s[0];
11                 StringBuilder sb = new StringBuilder();
12                 jsSerializer.Serialize(stu2, sb);
13                 return sb.ToString();
14             }
15             else
16                 return null;
17         }
//javascript 字符串转json对象:
 var obj = JSON.parse(str);
 //javascript json 对象转字符串:
 JSON.stringify(obj);

客户端:

有关AjaxPro.2.dll  和ajax.dll的关联 ,英特网说他俩不雷同 其实压根就是一人搞的吧 小编擦 。请在上头网址下载ajaxpro 那个才是巨细无遗的版本

1 //javascript 字符串转json对象:
2 
3 var obj = JSON.parse(str);
4 
5 //javascript json 对象转字符串:
6 
7 JSON.stringify(obj);

引用dll文件后要求配置webconfig httphandler 功效正是让 上边的ashx央浼转到我们的 ajaxpro代码 ,进而让大家的顾客端js直接调用服务端方法调用成功。

 

<system.webServer>
   <directoryBrowse enabled="true"/>
   <handlers>
    <add verb="*" path="*.ashx" name="myhandler" type="AjaxPro.AjaxHandlerFactory,AjaxPro."/>
    <!--<add verb="POST,GET" path="ajax/*.ashx" name="myhandler" type="Ajax.PageHandlerFactory, Ajax" />-->
   </handlers>
  </system.webServer>

至于AjaxPro.2.dll  和ajax.dll的关系 ,英特网说她们不均等 其实压根就是壹位搞的吧 笔者擦 。请在地方网址下载ajaxpro 那一个才是宏观的本子

下一场其他的本身就相当少说了哈待会间接看服务端代码。

引用dll文件后须求布置webconfig httphandler 成效正是让 上边的ashx须求转到我们的 ajaxpro代码 ,从而让大家的客商端js直接调用服务端方法调用成功。

easyui 你就足以领略为一群扩充了的控件。就疑似jquery同样 你把js对象 原生的html控件用他的事物一包 然后就能够点得出他有的为您写好的艺术 辅助你方便的拍卖数量。而且还应该有暗中认可的还足以的控件外观,那一点对于做公司管理类软件来说依然真诚不错的,做其余的就只可以呵呵了。下载easyui的文本 放到品种中 并引进easyui 相关js和体制文件 还会有jquery:

1 <system.webServer>
2     <directoryBrowse enabled="true"/>
3     <handlers>
4       <add verb="*" path="*.ashx" name="myhandler" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
5       
6       <!--<add verb="POST,GET" path="ajax/*.ashx" name="myhandler" type="Ajax.PageHandlerFactory, Ajax" />-->
7     </handlers>
8   </system.webServer>
<script type="text/javascript" src="../jquery-easyui-../jquery.min.js"> </script>
   <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/default/easyui.css" />
   <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/icon.css" />
   <script type="text/javascript" src="../jquery-easyui-../jquery.easyui.min.js"></script>

下一场别的的自己就非常的少说了哈待会直接看服务端代码。

然后 ,然后您就足以接纳easyui了 就像是easyui 首页 上介绍的那样 通过css样式 恐怕js代码 把原生html控件渲染成easyui控件

 

 <div class="easyui-dialog" style="width:px;height:px"
   data-options="
     title:'My Dialog',
     iconCls:'icon-ok',
     onOpen:function(){}">
   dialog content.
 </div>
 <input id="cc" style="width:px" />
 $('#cc').combobox({
   url: ...,
   required: true,
   valueField: 'id',
   textField: 'text'
 });

easyui 你就足以知道为一群扩充了的控件。就如jquery同样 你把js对象 原生的html控件用她的事物一包 然后就足以点得出他有的为你写好的主意 帮助你方便的管理数据。并且还会有暗中认可的还能够的控件外观,这一点对于做集团管理类软件以来 依旧真诚不错的,做任何的就不得不呵呵了。下载easyui的公文 放到项目中 并引进easyui 相关js和样式文件 还大概有jquery:

是的 非常实惠。其实国内还会有非常多js写的比较牛的 弄了一些如此ui 这样ui 选来选去照旧用那几个呢。用的最多的须求正是ajax服务端分页 ,我们来弄个呢。

1     <script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.min.js"> </script>
2     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/default/easyui.css" />
3     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/icon.css" />
4     <script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

我们先说下这几个easyui的datagrid  打她狗日的,顾客端html放个table标签 :<table id="studb"></table> 然后用js这么一搞 $('#studb').datagrid() 他就给你渲染成easyui datagrid控件了 ,你能够在document.ready()时做这一个工作。我们的数码表格是索要填写数据的 这个数据从哪来 显示怎么列 怎么分页 每页展现多少条,那个都以参数,怎么传进去。easyui非常多地方都吸纳json对象方式的一坨参数 ,譬如那几个datagrid:

 

 function bindDataToTb() {
       var keywordStr = $('#keyword').val();
       $('#studb').datagrid(
       {
         queryParams: { keyword: keywordStr },
         //url:"WebForm.aspx/BindData",
         toolbar: '#searchBar',
         pagination: true,
         pageNumber: ,
        singleSelect: true,
        pageSize: ,
        pageList: [, , ],
        loader: function (param, success, error) {
          var da = WebApplication.NewFolder.HelloAjaxNet.BindData(param.keyword, param.page, param.rows)
          if (da.value.rows == null) {
            success();
          }
          else
            success(da.value);
        },
        pagePosition: 'bottom',
        columns: [[
          { field: 'stuNo', title: 'Id', width: },
          { field: 'name', title: '名字', width: },
          { field: 'age', title: '年龄', width: },
          { field: 'loginName', title: '登录名', width: },
          { field: 'loginPwd', title: '密码', width: },
          { field: 'GradId', title: '班级Id', width: },
          { field: 'gradName', title: '班级', width: },
          {
            field: 'none', title: '操作', width: , formatter: function (value, row, index) {
              var btn = '<a class="editcls" href="#" onclick="delstuClick('   row.stuNo   ')">删除</a>';
              return btn;
            }
          }
        ]]
      });
     }

然后 ,然后您就能够使用easyui了 仿佛easyui 首页 上介绍的那么 通过css样式 也许js代码 把原生html控件渲染成easyui控件

实际看loader 和columns ,loader用于定义你以什么花样载入数据 定义了loader下面的url就从不需要了。

1 <div class="easyui-dialog" style="width:400px;height:200px"
2     data-options="
3         title:'My Dialog',
4         iconCls:'icon-ok',
5         onOpen:function(){}">
6     dialog content.
7 </div>

1 <input id="cc" style="width:200px" />
2 
3 $('#cc').combobox({
4     url: ...,
5     required: true,
6     valueField: 'id',
7     textField: 'text'
8 });

本身这里的WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) 自然也是服务端的方法 用于检索数据的 。

是的 极其有利。其实国内还也会有大多js写的可比牛的 弄了一部分这么ui 那样ui 选来选去依然用这几个啊。用的最多的要求就是ajax服务端分页 ,大家来弄个吗。

有关那三个param.keyword, param.page, param.rows 是我们用来落实loader时 easyui这种设计方法故意暴光给大家的参数 方便大家运用。

咱俩先说下那一个easyui的datagrid  打她狗日的,客商端html放个table标签 :<table id="studb"></table> 然后用js这么一搞 $('#studb').datagrid() 他就给你渲染成easyui datagrid控件了 ,你能够在document.ready()时做这些工作。大家的数额表格是索要填写数据的 那个多少从哪来 彰显怎么列 怎么分页 每页展现多少条,这么些都以参数,怎么传进去。easyui相当多地点都收到json对象格局的一坨参数 ,比方这么些datagrid:

param.keyword 是大家地点定义的 大家点找寻的时候需求往服务端传一个查询关键词 queryParams: { keyword: keywordStr }

 1 function bindDataToTb() {
 2             var keywordStr = $('#keyword').val();
 3             $('#studb').datagrid(
 4            {
 5                queryParams: { keyword: keywordStr },
 6                //url:"WebForm2.aspx/BindData",
 7                toolbar: '#searchBar',
 8                pagination: true,
 9                pageNumber: 1,
10                singleSelect: true,
11                pageSize: 5,
12                pageList: [5, 10, 20],
13                loader: function (param, success, error) {
14                    var da = WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows)
15                    if (da.value.rows == null) {
16                        success();
17                    }
18                    else
19                        success(da.value);
20                },
21                pagePosition: 'bottom',
22                columns: [[
23                    { field: 'stuNo', title: 'Id', width: 100 },
24                    { field: 'name', title: '名字', width: 100 },
25                    { field: 'age', title: '年龄', width: 100 },
26                    { field: 'loginName', title: '登录名', width: 100 },
27                    { field: 'loginPwd', title: '密码', width: 100 },
28                    { field: 'GradId', title: '班级Id', width: 100 },
29                    { field: 'gradName', title: '班级', width: 100 },
30                    {
31                        field: 'none', title: '操作', width: 100, formatter: function (value, row, index) {
32                            var btn = '<a class="editcls" href="#" onclick="delstuClick('   row.stuNo   ')">删除</a>';
33                            return btn;
34                        }
35                    }
36                ]]
37            });
38 
39         }

param.page 是easyui本人的参数表示近日第几页 param.rows表示每页行数,每当你 点表格的 上一页 下一页 的时候 就能够自行往loader 发翻页的参数 这么些是机关的。

切实看loader 和columns ,loader用于定义你以什么方式载入数据 定义了loader上边的url就平昔不要求了。

然后就从服务端获取数据填充表格 ,就是如此二个工作历程。 还应该有colums 小编就背着了便是概念彰显怎么列 和自定义列 那些很轻易看懂。

自己这里的WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) 自然也是服务端的方法 用于检索数据的 。

本文由新浦京81707con发布于首页,转载请注明出处:澳门普金网站实例详解angularjs和ajax的结合使用,

关键词: 新浦京81707con MVVM 综合

上一篇:php怎么把session保存到MySql数据库中,常见问题小

下一篇:没有了