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 ...
随机推荐
- [置顶] Weblogic节点管理
配置节点管理之后能方便管理,可以在控制台启动停止被管服务器,一般配置步骤:创建受管服务器,创建machine,屏蔽SSL主机名验证,修改nodemanager.properties,启动nodeman ...
- [转]在 Mac OS X上编译 libimobiledevice 的方法
link: http://blog.boceto.fr/2012/05/05/libimobiledevice-for-macosx/ The objective of the day: Compil ...
- opencv中的vs框架中的Blob Tracking Tests的中文注释。
经过2天的努力终于算是大概弄清楚了opencv中的vs框架是大概是如何工作的了,下面贴一下我自己写的代码注释.非常详细.对初学者有帮助.尤其详细分析了RunBlobTrackingAuto()函数,在 ...
- Oracle学习的一些建议（转）
核心提示:学习Oracle是一个漫长艰辛的过程.如果没有兴趣,只是被迫学习,那么是很难学好的.学习到一定程度的时候,要想进一步提高,就不得不接触很多Oracle之外的东西 学习Oracle是一个漫长艰 ...
- JavaScript的基本类型总结
看了让你有收获的JavaScript的基本类型总结 Javascript是一种弱类型语言,没有明确的类型分类:网上分类的方式比较多,个人感觉不比去特别的追究细分是什么什么类型,若是能够明确的分出类 ...
- C#开发 “因为某项目未能生成,所以无法发布”
今天把笔记本电脑中开发的项目复制到台式机上,启用调试都正常.准备发布的时候却提示“因为某项目未能生成,所以无法发布”的错误. 从网上查找资料可以通过以下方法解决: 在项目属性的签名标签中,创建测试证书 ...
- VS 2012 单元测试简单配置
写算法时大多依靠简单输入验证,经常遇到小范围输入正常,大范围或特殊情况输入结果错误的问题.所以写程序之前最好先想好几个特殊用例来测试,以验证算法是否正确.单元测试就是个不错的工具,而VS 2012提供 ...
- [C++]neuroscan的延时预估
一直用自己写的程序在线处理脑电信号,知道其中有一个时间延时,但具体延时是多少没有是个准确的估计,今天抽时间做了一下,发现大概延时在100ms左右. 以后尝试使用并口操作.应该可以完全避免这个问题. 实 ...
- 两行代码实现微信小程序联系人sidebar
话不多说,先给你们看看核心数据和结构: 一.数据: city的json array,letter的array (city的json array里的首字母是我手工放置进去的,你也可以通过for循环获得c ...
- dapper 可空bool转换出错及解决方案
最近使用entityframewok生成数据库,使用dapper来访问数据库,产生了一个意外的bug,下面是产生bug的示例以及解决方案. 由于用entityframework生成数据库,默认情况en ...