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 + " " +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的更多相关文章
- 【译】在Asp.Net中操作PDF - iTextSharp - 利用列进行排版
原文 [译]在Asp.Net中操作PDF - iTextSharp - 利用列进行排版 在使用iTextSharp通过ASP.Net生成PDF的系列文章中,前面的文章已经讲述了iTextSharp所涵 ...
- 【译】在Asp.Net中操作PDF - iTextSharp - 绘制矢量图
原文 [译]在Asp.Net中操作PDF - iTextSharp - 绘制矢量图 在上一篇iTextSharp文章中讲述了如何将现有的图片插入PDF中并对其进行操作.但有时,你需要在PDF中绘制不依 ...
- 【译】在Asp.Net中操作PDF – iTextSharp - 操作图片
原文 [译]在Asp.Net中操作PDF – iTextSharp - 操作图片 作为我的iTextSharp系列的文章的第七篇,开始探索使用iTextSharp在PDF中操作图片,理解本篇文章需要看 ...
- 【译】在Asp.Net中操作PDF – iTextSharp - 使用表格
原文 [译]在Asp.Net中操作PDF – iTextSharp - 使用表格 使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并 ...
- 【译】在Asp.Net中操作PDF – iTextSharp - 使用链接和书签
原文 [译]在Asp.Net中操作PDF – iTextSharp - 使用链接和书签 用户和PDF文档的交互可以通过锚(链接)和书签进行,接着我前面iTextSharp的系列文章,本篇文章主要讲通过 ...
- 【译】在Asp.Net中操作PDF – iTextSharp-列表
原文 [译]在Asp.Net中操作PDF – iTextSharp-列表 在前文中,我们已经知道了如何利用iTextSharp创建PDF文档,设置字体样式和风格.本文开始讲述iTextSharp中的有 ...
- 【译】在Asp.Net中操作PDF – iTextSharp -利用块，短语，段落添加文本
原文 [译]在Asp.Net中操作PDF – iTextSharp -利用块,短语,段落添加文本 本篇文章是讲述使用iTextSharp这个开源组件的系列文章的第三篇,iTextSharp可以通过As ...
- 【译】在Asp.Net中操作PDF - iTextSharp - 使用字体
原文 [译]在Asp.Net中操作PDF - iTextSharp - 使用字体 紧接着前面我对iTextSharp简介博文,iTextSharp是一个免费的允许Asp.Net对PDF进行操作的第三方 ...
- 【转】使用iTextSharp在Asp.Net中操作PDF
使用iTextSharp在Asp.Net中操作PDF操作 使用iTextSharp在Asp.Net中操作PDF系列文章目录 实战 iTextSharp iTextSharp 合并多个PDF文件 C#生 ...
随机推荐
- maven如何将本地jar安装到本地仓库
1.首先确认你的maven是否已经配置: 指令:mvn -v 2.本地的jar包位置: 3.在自己项目pom.xml中添加jar依赖: <dependency> <groupId&g ...
- 机器学习技术点----apachecn的github地址
预处理 离散化 等值分箱 等量分箱 独热 one-hot 标准化 最小最大 min-max z-score l2 标准化 归一化 特征选择 ANOVA 信息增益/信息增益率 模型验证 评价指标 回归 ...
- struts2 中的 addActionError 、addFieldError、addActionMessage的方法【转】
一.addActionError("错误内容"): Action级别的错误消息this.addActionError("错误信息1");this.addAct ...
- 关于hover的一个问题记录
问题描述: 页面显示: 当鼠标移动到其中一个文件夹上面的时候,显示如下: 显示这样的效果的原理是:对于外层元素.collectionsbox添加hover之后,再去取里面的元素,比如说左上角的shar ...
- python-面向对象-07_继承
继承 目标 单继承 多继承 面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中 继承 实现代码的重用,相同的代码不需要重复的编写 多态 不同的对象调用相同的方法,产生不 ...
- centos安装Django之一:安装openssl
这几天在部署Django,需要安装的东西有点多,python3.pip3.openssl(pip依赖ssl环境),所以第一步是安装openssl,如何安装呢?主要有三步,随ytkah一起来看看吧 1. ...
- SQL Server--疑难杂症之坑爹的Windows故障转移群集（转）
估计是春节前最后一次写博客,也估计是本年值班最后一次踩雷,感叹下成也SQL SERVER,败也SQL SERVER. --======================================= ...
- kafka6 编写使用自定义分区的生产者
一 客户端 在上一篇博客创建的简单生产者的基础上,进行两个修改操作: 1.新建SimplePartitioner.java,修改返回分区为1. SimplePartitioner.java代码如下 p ...
- AlertWindowManager 弹出提示窗口使用帮助(上)
LookAndFeel(界面外观): NativeStyle:本地化界面为真实用系统内置外观 SkinName:本地化界面(NativeStyle:)设置为假可使用皮肤外观 OptionAnimate ...
- Redis入门到高可用（六）—— 字符串
一.结构和命令 1.字符串键值结构 key是字符串,value可以是字符串.数字.二进制.json等: redis的key和string类型value限制均为512MB. 2.使用场景 ♦️ 缓存 ♦ ...