ASP.Net 中操作Ajax

有时候，越深入去了解一个点，越发觉得自己无知，而之前当自己晓得一两个片面的点还洋洋自得，殊不知，这是多么讽刺，JQuery中有很多优势，比如异步提交值，部分刷新，给用户很好的体验感。目前为止，大部分项目基本都是MVC开发，部分WebForm的项目逐渐被淘汰，恰巧当前维护是银行多年前的古董项目，WebForm已许久不接触，趁此机会，总结下与Ajax的交互，虽然MVC与Ajax的交互更友好简洁。

下面介绍常见的JQuery中对Ajax的应用 Load（）、Ajax（）、Get（）、Post（）、getJson()、getScript（）

jQery对Ajax操作进行了封装，常见的 ajax()属于最底层的方法，使用频率很高的 $.post()、$.get() 是在最底层的基础上又细分出来封装的一层，因为其分别对应的ajax()中 type的 post、get。可简单的理解为

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据

前台发送数据-->后台接收-->进行处理-->返回前台-->前台将值显示在评论区

为什么说是绕了一大圈，因为GET、POST 是有区别的，我这里为了统一写DEMO，不免在用法上有画蛇添足之嫌

前台body内容总览

<body><form id="form1" runat="server"><div>姓名：<asp:TextBox ID="txtName" runat="server" ClientIDMode="Static"></asp:TextBox><p></p>評論：<asp:TextBox ID="txtContent" runat="server" ClientIDMode="Static" TextMode="MultiLine"></asp:TextBox><p></p>     <asp:Button ID="btnAjax" runat="server" Text="Ajax" ClientIDMode="Static"></asp:Button><asp:Button ID="btnPost" runat="server" Text="Post" ClientIDMode="Static"></asp:Button><asp:Button ID="btnGet" runat="server" Text="Get" ClientIDMode="Static" /><p></p>    </div><div class="comment">評論區</div><div id="resTest" title="content" style="height:auto"></div>      </form>
</body>

1. Ajax（）

①可以直接请求到后台中某个方法，而不必在后台Load事件中处理

②可以设置失败时的函数

前台界面：（PS：form表单下的ASP中button控件，默认类型值是submit，所以在前台方法下面都增加了 return false；下同）

$("#btnAjax").click(function () {$.ajax({type: "post",contentType: "application/json; charset=utf-8",dataType: "json",url: "WebForm1.aspx/ReceiveJson",data: "{'Name':'郎中令','Content':'200'}",success: function (data) {                                                                $("#resTest").append(data.d);                    },error: function () {alert("發送失敗");}});return false;
});

后台界面：

        //參數名必須與前台JSon鍵名一致
        [WebMethod]public static string ReceiveJson(string Name, string Content){return  Name + "&nbsp" +DateTime.Now.ToString("yyyyMMdd HH:mm:ss")+ "<br /> " + "Content:" + Content;}

2. post() 主要用来区别get（）

① 方式不同，一般表单的提交中get请求会让参数显示在url 栏中进行传递，post请求是作为http消息的实体内容发送给后台

② 大小不同， get请求是以url 传递参数的，所以会有大小限制，而post则可以传更多更大的数据

③ 安全性不同， get请求的数据会被浏览器缓存起来，可在历史记录中查看，对于密码等某些信息会不安全

前台界面：

$("#btnPost").click(function () {if ($("#txtName").val()!=""&&$("#txtAge").val()!="") {$.post("WebForm1.aspx", {Name: $("#txtName").val(),Content: $("#txtContent").val()}, function (data) {                       $("#resTest").append(data);});}else {alert("界面中尚有文本框值未填寫");}return false;
});

3. get() 该说的前面都说了，用法以及参数结构和post（）一样，这里没什么好讲的

$("#btnGet").click(function () {if ($("#txtName").val()!=""&&$("#txtAge").val()!="") {$.get("WebForm1.aspx", {Name: $("#txtName").val(),Content: $("#txtContent").val()}, function (data,status) {$("#resTest").html(data);});}else {alert("界面中尚有文本框值未填寫");}return false;
});

对于后台而言，Post（）和Get（）请求，都必须在Load 事件里面处理，即使前台定义后台中的方法，像ajax()那样，为 url: "WebForm1.aspx/ReceiveJson", 也不能处理，这点我也暂时没有想明白，线上也暂无解决方案。此两者后台的处理方式完全一样，如下，仅仅是将接收的值中间加了一个时间

        protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){if (Request["Name"] != null || Request["Content"] != null) {string all = Request["Name"].ToString()+"&nbsp" +DateTime.Now.ToString("yyyyMMdd HH:mm:ss")+ "<br />  "  + Request["Content"].ToString();Response.Write(all);Response.End();}}}

三个方法已罗列出来，启动项目，看看效果如何

好吧，我承认，这个太丑了，功能还是实现了的

权当是个学习记录

----市人皆大笑，举手揶揄之

转载于:https://www.cnblogs.com/Sientuo/p/6273702.html

ASP.Net 中操作Ajax相关推荐

Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生
最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...
【译】在Asp.Net中操作PDF – iTextSharp -利用块，短语，段落添加文本
本篇文章是讲述使用iTextSharp这个开源组件的系列文章的第三篇,iTextSharp可以通过Asp.Net创建PDFs,就像HTML和ASP.Net为文本提供了多种容器一样,iTextSharp ...
asp.net 中使用ajax 和浏览器的关系
====================================================== 注:本文源代码点此下载 ================================= ...
利用Asp.net中的AJAX制作网页上自动选取开始日期及结束日期的用户自定义控件...
前段时间用过一个酒店入住预约网站,当你点击"入住时间"时会悬浮出一对并列的日历,然后点击左边的日历就能选择入住时间,点击右侧的日历就能自动得到离店时间,当时没有太留意是怎么实现的, ...
ASP.NET中的AJAX应用开发详解
[IT168 技术文档]其实AJAX应用的核心就是XMLHttpRequest,通过现象看本质,即使使用微软的AJAX服务器控件最终也是需要这些的,只不过使用微软AJAX服务器控件开发AJAX应用时我 ...
ASP.NET中的AJAX应用开发总结
11月21日晚7点应邀在武汉大学信息学院做了一场关于ASP.NET下AJAX开发的报告,以我自己经历讲述了一些特殊应用在过去到现在实现手段的变化,本来想回家之后做个总结的,但是由于最近以来事情一直很多 ...
在ASP.NET中实现AJAX
对ASP.NET而言,Ajax不需要回传就能进行服务器端处理,从而使客户机(浏览器)具有丰富的服务器端能力.换句话说,它为异步指派和处理请求与服务器响应提供了一个框架. Asynchronous Ja ...
在ASP.NET中操作文件的例子
利用SYSTEM.IO 名空间中的STREAMWRITER,STREAMREADER及FILE类,完成文件读.写.删除的操作. ----------------------------------- ...
ASP.Net中实现Ajax的几种实现方法之AjaxPro的使用（一） [AjaxPro.AjaxMethod]
原文地址 1.什么是Ajax Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写."Ajax"这个名词的发明人是 ...

ASP.Net 中操作Ajax

ASP.Net 中操作Ajax相关推荐

最新文章

热门文章