有时候，越深入去了解一个点，越发觉得自己无知，而之前当自己晓得一两个片面的点还洋洋自得，殊不知，这是多么讽刺，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();

                }

            }

        }

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

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

权当是个学习记录

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

ASP.Net 中操作Ajax的更多相关文章

  1. 【译】在Asp.Net中操作PDF - iTextSharp - 利用列进行排版

    原文 [译]在Asp.Net中操作PDF - iTextSharp - 利用列进行排版 在使用iTextSharp通过ASP.Net生成PDF的系列文章中,前面的文章已经讲述了iTextSharp所涵 ...

  2. 【译】在Asp.Net中操作PDF - iTextSharp - 绘制矢量图

    原文 [译]在Asp.Net中操作PDF - iTextSharp - 绘制矢量图 在上一篇iTextSharp文章中讲述了如何将现有的图片插入PDF中并对其进行操作.但有时,你需要在PDF中绘制不依 ...

  3. 【译】在Asp.Net中操作PDF – iTextSharp - 操作图片

    原文 [译]在Asp.Net中操作PDF – iTextSharp - 操作图片 作为我的iTextSharp系列的文章的第七篇,开始探索使用iTextSharp在PDF中操作图片,理解本篇文章需要看 ...

  4. 【译】在Asp.Net中操作PDF – iTextSharp - 使用表格

    原文 [译]在Asp.Net中操作PDF – iTextSharp - 使用表格 使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并 ...

  5. 【译】在Asp.Net中操作PDF – iTextSharp - 使用链接和书签

    原文 [译]在Asp.Net中操作PDF – iTextSharp - 使用链接和书签 用户和PDF文档的交互可以通过锚(链接)和书签进行,接着我前面iTextSharp的系列文章,本篇文章主要讲通过 ...

  6. 【译】在Asp.Net中操作PDF – iTextSharp-列表

    原文 [译]在Asp.Net中操作PDF – iTextSharp-列表 在前文中,我们已经知道了如何利用iTextSharp创建PDF文档,设置字体样式和风格.本文开始讲述iTextSharp中的有 ...

  7. 【译】在Asp.Net中操作PDF – iTextSharp -利用块，短语，段落添加文本

    原文 [译]在Asp.Net中操作PDF – iTextSharp -利用块,短语,段落添加文本 本篇文章是讲述使用iTextSharp这个开源组件的系列文章的第三篇,iTextSharp可以通过As ...

  8. 【译】在Asp.Net中操作PDF - iTextSharp - 使用字体

    原文 [译]在Asp.Net中操作PDF - iTextSharp - 使用字体 紧接着前面我对iTextSharp简介博文,iTextSharp是一个免费的允许Asp.Net对PDF进行操作的第三方 ...

  9. 【转】使用iTextSharp在Asp.Net中操作PDF

    使用iTextSharp在Asp.Net中操作PDF操作 使用iTextSharp在Asp.Net中操作PDF系列文章目录 实战 iTextSharp iTextSharp 合并多个PDF文件 C#生 ...

随机推荐

  1. CloudStack+KVM环境搭建（步骤很详细，说明ClockStack是用来管理虚拟机的）

    文章目录环境准备配置本地域名解析关闭selinux安装ntp服务安装管理端安装Mysql数据库安装服务端RPM:初始化CloudStack数据库:初始化cloudstack管理服务器安装系统虚拟机安装 ...

  2. 利用Python进行自然语言处理（笔记）第一章

    一.标识符 一个我们想要放在一组对待的字符序列--如:”hairy“.”his“或者”:“: 二.词类型 一个词在一个文本中独一无二的出现形式或拼写,也就是说这个词在词汇表中是唯一的.如果我们计数的项 ...

  3. P4827 [国家集训队] Crash 的文明世界

    传送门:洛谷 题目大意:设$$S(i)=\sum_{j=1}^ndis(i,j)^k$$,求$S(1),S(2),\ldots,S(n)$. 数据范围:$n\leq 50000,k\leq 150$ ...

  4. 编写第一个H5页面

    <!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>第 ...

  5. Email实例

    import java.util.Properties; import javax.activation.DataHandler; import javax.activation.DataSource ...

  6. UVA 1379 - Pitcher Rotation(DP + 贪心)

    题目链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=4125" rel="nofo ...

  7. percona顶级项目（针对数据库）

    percona顶级项目(针对数据库) 地址:https://github.com/Percona-Lab 1.mongodb_consistent_backupTool for getting con ...

  8. 20170927 Webservice发布指定账户进行访问

    1. 搭建IIS 平台 于服务器A1 2.发布Webservice 到A1 我的问题在于(Webservice中方法中内容会对B1服务器的共享路径进行写入文件动作), 如何来控制网页使用特定的账户去访 ...

  9. MySQL 多源复制（Mulit-Source Replication）

    MySQL多源复制方案        看复制源Master_1的同步状态:SHOW SLAVE STATUS FOR CHANNEL 'Master_1'\G 查看复制源Master_2的同步状态:S ...

  10. EscapeDataString URI 字符串太长

    /// <summary> /// 处理 无效的 URI: URI 字符串太长.问题 /// </summary> /// <param name="value ...