zoukankan      html  css  js  c++  java
  • Ajax辅助方法

    利用ajax技术可以帮助网站减少切换页面的机会,加快网速响应速度,降低网络下载流量,也能让用户经验更好。aspnet mvc中内建了ajax的辅助方法,可以方便快速的做到许多ajax互动效果。

     
    在使用ajax之前,要在页面先载入jq以及mvc4.0专案模板内附的jquery.unobtrusive-ajax.js文件才能正常执行,
     
    为了让网站载入适当的js函数库,必须现在Layout页面载入适当的js文件,事实上在mvc4..0的网际网路专案模板中已经在_Layout.cshtml页面上加入了jq载入,可以开启主版页面的最下方看到
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts",required:false)
     
    第一句的意思就是载入专案里的jquery-1.7.1.js文件,因为ajax功能并不是每一页都需要使用,所以预设并没有载入,可以通过主版页面预留的@RenderSection区域来载入jquery.unobtrusive-ajax.js文件
     
    如果需要在页面中使用ajax辅助方法
    那么在这个页面最上方加上以下这段@section语法
     
    @section scripts{
     
    }
     
     
    使用ajax超链接功能
    ajax辅助方法会比html辅助方法多出一个AjaxOptions类型的参数,用来控制Ajax执行时的各种参数,
    public ActionResult GetTime(){
    return Content(Datetime.Now.ToString(F""))
    }
     
    @Html.ActionLink("取得目前时间",“GetTime”)
     
    输出
    <标签a href="/Home/GetTime">取得目前时间</标签a>
     
    当这个超链接被点击后,会链接到另一个/Home/GetTime页面,如果希望改用ajax的方式动态地将/Home/GetTime网页的执行结果回传到目前网页的其中一个div里,那么可以这样改写
    @Ajax.ActionLink("取得目前时间",“GetTime”,new AjaxOptions{UpdateTargetId = "now"})
     
    <标签div id="now"></标签div>
     
    输出
    <标签a data-ajx="true" data-ajax-mode="replace" data-ajax-update="#now" href="/Home/GetTime"> 取得目前时间</标签a>
     
    <标签div id="now"></标签div>
     
    开启网页之后,点击这个超链接,浏览器便会自动取得/Home/GetTime网页的完整内容,并填入now的div块中。
    注意:
    通过ajax远端取得网页内容的过程中,浏览器会为了让执行效率提升,会预设通过ajax取得的网页内容只要ajax调用网址没有改变,且远端的http没有包含缓存相关标头,那么浏览器不会再次发出ajax要求,以刚刚的为例。,当第一次点击取得时会回传当下的服务器时间,当第二次点选同一个网址,案例应该看到更新的时间才对,但是结果却永远没法更新,除非清空浏览器缓存,
     
    如果需要ajax回传的数据必须及时更新,那么就必须调整你的Action方法定义,新增一个OutputCache属性,强迫浏览器不要缓存这一页的要求
    [OutputCache(NoStore=true,Duration=0)]
    public ActionResult GetTime(){
    return Content(Datetime.Now.ToString(F""))
    }
     
    使用ajax表单功能
    比如原本是
    @using(Html.BeginForm()){
     
    若要改成ajax
    @using(Ajax.BeginForm(new AjaxOptions{ UpdateTargetId="now"}))
     
     
    @Ajax.ActionLink执行流程
    1,用户单点击超链接
    2,对超链接上的href属性定义的Action网址发出HTTP要求
    3,取回内容后再将内容填入AjaxOptions物件的UpdateTargetId属性所指定的id元素中
     
    @Ajax.BeginForm执行流程
    1,用户送出表单
    2,对表单元素上的action属性的Action网址发出http要求,并将表单所有数据传过去,
    3,取回内容后再将内容填入ajaxOptions物件的UpdateTargetId属性所指定的id元素中。
     
    了解AjaxOptions类型
    无论使用Ajax.ActionLink 或者Ajax.BeginForm,都需要传入AjaxOptions的物件当参数,这个参数将决定asp.net mvc的ajax如何运作。
    AjaxOptions属性名称
    Confirm执行ajax之前会跳出一个确认对话框
    HttpMethod设定http的设定方法
    InsertionMode设定通过Ajax的辅助方法取回数据时,要如何将数据新增至UpfateTargetId(缩写为UTI)指定的元素中,有以下三种:
    InsertionMOde.Replace:取代UTI的内容(预设)
    InsertionMOde.InsertBefore:在UTI之前插入
    InsertionMOde.InsertAfter 在UTI之后插入
     
    LoadingElementId 在ajax尚未完成所有工作前显示的元素id值
     
    OnBegin设定开始时要执行的js函数名称
     
    OnComplete设定结束时要执行的js函数名称
     
    OnFailure设定失败时执行的
     
    OnSuccess 设定完成时要执行的js函数名称
     
    UpdateTargetId设定回传值要显示在哪一个id上
     
    URL 设定ajax的请求网址
     
    当使用OnBegin,OnComplete,OnFailure,OnSuccess 这四个属性时,如果指定的函数名称不存在网页中,就会发生js错误
     
     
    实例:
    @Ajax.ActionLink("删除数据",“GetTime”,new {controller="Home",id=3,new AjaxOptions{OnSuccess="Delete" ,Confirm="您确定要删除吗?", HttpMethod="POST",LoadingElementId="ajaxLoad"}})
     
     
    <<span >标签script标签>
    function Delete(data){
    alert(data);
    }
    </</span>标签script标签>
  • 相关阅读:
    Android 开发技术周报 Issue#288
    Android 开发技术周报 Issue#287
    Flutter Weekly Issue 62
    Android 开发技术周报 Issue#286
    Flutter Weekly Issue 61
    Flutter Weekly Issue 60
    最新解决navigator.webdriver=true的方法
    极验反爬虫防护分析之slide验证方式下图片的处理及滑动轨迹的生成思路
    极验反爬虫防护分析之接口交互的解密方法
    极验反爬虫防护分析之接口交互的解密方法补遗
  • 原文地址:https://www.cnblogs.com/jinhaoObject/p/4597703.html
Copyright © 2011-2022 走看看