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

                }

            }

        }

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

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

权当是个学习记录

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

jQuery中操作Ajax方法小结的更多相关文章

  1. $.ajax()方法详解 jquery中的ajax方法

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  2. jquery中的ajax方法参数

    引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...

  3. jquery中的ajax方法

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  4. jquery中的ajax方法参数的用法和他的含义

    jquery中的ajax方法参数的用法和他的含义: 1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:  要求为String类型的参数,请求方式(pos ...

  5. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

  6. jQuery中的$.ajax()方法

    jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...

  7. jquery中的ajax方法参数总是记不住，这里记录一下。

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  8. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

  9. jquery中页面Ajax方法$.load的功能

    load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequ ...

随机推荐

  1. Python Learing（二）：Basic Image Processing 1

    <写在前面> Basic image processing 1: 0.(以简单的曲线图为例)对于生成的图自定义外观,使用子图,多个数据集,标题,标签,交互式标注,图例: 1.生成散点图,直 ...

  2. (转)最大似然估计&贝叶斯估计

    最大似然估计&贝叶斯估计 与传统计量模型相对的统计方法,存在 1)参数的解释不同:经典估计:待估参数具有确定值它的估计量才是随机的.如果估计量是无偏的,该估计量的期望等于那个确定的参数.bay ...

  3. JAVA算法两道

    算法(JAVA)----两道小小课后题   LZ最近翻了翻JAVA版的数据结构与算法,无聊之下将书中的课后题一一给做了一遍,在此给出书中课后题的答案(非标准答案,是LZ的答案,猿友们可以贡献出自己更快 ...

  4. AspNetWebApi管线中如果定义两种类型的消息处理程序（全局/路由)

    AspNetWebApi管线中如果定义两种类型的消息处理程序(全局/路由) 在AspNetWebApi管线中存在两种类型的消息处理程序(Message Handler) 1.全局消息处理程序,所有的请 ...

  5. IE6的那些css常见bug（汇总）

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

  6. StringEscapeUtils.unescapeHtml的使用

    在做代码高亮时,从数据库中取出代码如下(节选): <pre class="brush: java;"> 需要的应该是<pre class=\"brush ...

  7. EasyUI项目驱动学习

    下面以一个项目简单介绍easyui的使用,主要包括以下组件 布局面板 - layout 可伸缩面板 - accordion 选项卡 - tabs 控制面板 - panel 窗口 - window 对话 ...

  8. Oracle和Mysql分别生成sequence序列

    有时候在往数据库中插入数据的时候,如果ID值是32位的UUID, 而自己随便写个字符又不合适,这时就要用到函数来产生一个序列值 Oracle: select sys_guid() from dual; ...

  9. java开发是否一定要使用三层结构

    从开始学习java的时候,爷爷的爷爷就教导我们,要使用三层结构去开发结构明细,低耦合,高可用的项目.但是具体开发中,每新建一张表,就要新建BO,dao层,服务层,而新建这5,6个类也许仅仅只为了实现一 ...

  10. easyui 通用的datagrid中如何带有查询条件分页

    html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...