ASP.Net 中操作Ajax
2017-01-11 23:44
169 查看
有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺,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内容总览
1. Ajax()
①可以直接请求到后台中某个方法,而不必在后台Load事件中处理
②可以设置失败时的函数
前台界面:(PS:form表单下的ASP中button控件,默认类型值是submit,所以在前台方法下面都增加了 return false;下同)
后台界面:
2. post() 主要用来区别get()
① 方式不同, 一般表单的提交中get请求会让参数显示在url 栏中进行传递,post请求是作为http消息的实体内容发送给后台
② 大小不同, get请求是以url 传递参数的,所以会有大小限制,而post则可以传更多更大的数据
③ 安全性不同, get请求的数据会被浏览器缓存起来,可在历史记录中查看,对于密码等某些信息会不安全
前台界面:
3. get() 该说的前面都说了,用法以及参数结构和post()一样,这里没什么好讲的
对于后台而言,Post()和Get()请求,都必须在Load 事件里面处理,即使前台定义后台中的方法,像ajax()那样 ,为 url: "WebForm1.aspx/ReceiveJson", 也不能处理,这点我也暂时没有想明白,线上也暂无解决方案。此两者后台的处理方式完全一样,如下,仅仅是将接收的值中间 加了一个时间
三个方法已罗列出来,启动项目,看看效果如何
好吧,我承认,这个太丑了,功能还是实现了的
权当是个学习记录
----市人皆大笑,举手揶揄之
下面介绍常见的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 + " " +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()+" " +DateTime.Now.ToString("yyyyMMdd HH:mm:ss")+ "<br /> " + Request["Content"].ToString(); Response.Write(all); Response.End(); } } }
三个方法已罗列出来,启动项目,看看效果如何
好吧,我承认,这个太丑了,功能还是实现了的
权当是个学习记录
----市人皆大笑,举手揶揄之
相关文章推荐
- asp.net ajax 使用updatepanel进行操作后使用脚本
- CuteEditor5.0的安装及它与Ajax.net配合无刷新操作数据库 (asp.net C#)
- 在asp.net(vb)中,应用ajaxpro.dll操作Session出现错误的解决方法
- ArcGISServer adf通过Asp.Net自己Ajax实现无刷新操作
- ASP.net通过JQuery实现Ajax操作
- 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)
- asp.net 后台cs代码怎么操作前台用ajax实现下拉框进行搜索
- Asp.net通过Jquery操作WebService进行Ajax读写
- ASP.NET WebForm 之 Ajax 请求后端处理 概述 ASP.NET 在MVC中的用途非常广泛,操作起来也非常简单。前台请求异步请求 Controlle
- ASP.NET学习笔记(5)——原生Ajax基本操作
- asp.net ajax操作的几种方法
- asp.net ajax 异步操作
- Asp.net 更改Alert样式和后台注册Jquery的Ajax异步提交事件[包括处理前操作、处理后操作(注明:此方法只是作为参考,如有需要可自行修改)]
- asp.net 全部选中与取消操作,选中后的删除(ajax)实现无刷新效果
- asp.net使用jbox插件,利用ajax(使用一般处理程序方式)执行撤销操作
- ASP.NET中常用的JavaScript操作
- ASP.NET读取POP3邮件的操作
- 如何在asp.net中操作文件
- 如何在asp.net页面上放置的控件上实现左右键菜单,同时对之操作(1)