jQuery中操作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();
}
}
}
三个方法已罗列出来，启动项目，看看效果如何
好吧，我承认，这个太丑了，功能还是实现了的
权当是个学习记录
----市人皆大笑，举手揶揄之
jQuery中操作Ajax方法小结的更多相关文章
- $.ajax()方法详解 jquery中的ajax方法
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- jquery中的ajax方法参数
引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...
- jquery中的ajax方法
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- jquery中的ajax方法参数的用法和他的含义
jquery中的ajax方法参数的用法和他的含义: 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(pos ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- jQuery中的$.ajax()方法
jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...
- jquery中的ajax方法参数总是记不住，这里记录一下。
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
- jquery中页面Ajax方法$.load的功能
load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequ ...
随机推荐
- twisted学习笔记4 部署Twisted 应用程序
原创博文,转载请注明出处. Twisted是一个可扩展,跨平台的网络服务器和客户端引擎. Twisted Application 框架有五个主要基础部分组成:服务,应用程序,TAC文件插件和twist ...
- java中的log
slf4j slf4j的全称是: Simple Logging Facade for Java (SLF4J). slf4j的官方网站:http://www.slf4j.org 简介 SLF4J不是 ...
- json在线编辑器
今天搭建了一个json在线的编辑器. 这个主要的功能就是解析和检查json的语法是不是有错误.在使用json的时候,最担心的就是语法的问题了.尤其是自己手动去拼json格式的输出时候. 如图所示,左边 ...
- Introsort(内观排序)
.NET 4.5 这个版本的Array.Sort更改了STL的内观排序算法,那相对于快速排序内观排序到底有什么优化过的呢? 根据维基百科所说,这个排序算法首先从快速排序开始,当递归深度超过一定深度(深 ...
- Django 源码小剖: 初探 WSGI
Django 源码小剖: 初探 WSGI python 作为一种脚本语言, 已经逐渐大量用于 web 后台开发中, 而基于 python 的 web 应用程序框架也越来越多, Bottle, Djan ...
- ios学习笔记（一）之Object-C
一:Objective-C语言基础 二:Objective-C类与继承和协议 一:Objective-C语言基础: 1.1)#import 包含头文件 与#include 作用相同 1.2)Obje ...
- LigerUI权限系统之用户管理
用户管理较之前的的组织结构和菜单管理稍显复杂.不管怎样还是先上图吧,再来讲解 左边是组织结构,右边是用户,用户是跟组织机构挂钩的,通过点击左边的组织结构,来刷新右边,加载该组织机构下的用户. 用户管理 ...
- 对C# 中Readonly的再认识
C#中有两种常量类型,分别为readonly(运行时常量)与const(编译时常量),本文将就这两种类型的不同特性进行比较并说明各自的适用场景. 工作原理 readonly为运行时常量,程序运行 ...
- 公共建筑能耗监测平台的GPRS通讯服务器的开发方法分享
公共建筑能耗监测平台的GPRS通讯服务器的开发方法分享 在这个文章里面我将用一个实际的案例来分享如何来构建一个能够接受3000+个连接的GPRS通讯服务器软件,这个软件被我认为是一个艺术品,实现周期为 ...
- 常用PHP正则表达式
获取所有图片网址preg_match_all(“/ src=(\”|\’){0,}(http:\/\/(.+?))(\”|\’|\s|>)/is”,$text,$img); 匹配中文字符的正则表 ...