[Ajax]ajax学习与理解

1.新建demo.aspx页面。
2.首先在该页面的后台文件demos.aspx.cs中添加引用。

using System.Web.Services;

3.无参数的方法调用.

大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。后台代码：

[WebMethod]     public static string SayHello()
{     return "Hello Ajax!";
}

JS代码：

$(function() {
$("#btnOK").click(function() {
$.ajax({     //要用post方式                  type: "Post",     //方法所在页面和方法名                  url: "Demo.aspx/SayHello",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {     //返回的数据用data.d获取内容                      alert(data.d);
},
error: function(err) {
alert(err);
}
});     

//禁用按钮的提交              return false;
});
});

页面代码：

    <form id="form1" runat="server">
<div>
<asp:Button ID="btnOK" runat="server" Text="验证用户" />
</div>
</form>

运行效果如下：

3.有参数方法调用
后台代码：

[WebMethod]     public static string GetStr(string str, string str2)
{     return str + str2;
}

JS代码：

$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "demo.aspx/GetStr",     //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字                  data: "{'str':'我是','str2':'XXX'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {     //返回的数据用data.d获取内容                        alert(data.d);
},
error: function(err) {
alert(err);
}
});     

//禁用按钮的提交              return false;
});
});

运行效果如下：

4.返回数组方法
后台代码：

[WebMethod]     public static List<string> GetArray()
{
List<string> li = new List<string>();     

for (int i = 0; i < 10; i++)
li.Add(i + "");     

return li;
}

JS代码：

$(function() {
$("#btnOK").click(function() {
$.ajax({
type: "Post",
url: "demo.aspx/GetArray",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {     //插入前先清空ul                      $("#list").html("");     

//递归获取数据                      $(data.d).each(function() {     //插入结果到li里面                          $("#list").append("<li>" + this + "</li>");
});     

alert(data.d);
},
error: function(err) {
alert(err);
}
});     

//禁用按钮的提交              return false;
});
});

页面代码：

<form id="form1" runat="server">

<div>

<asp:Button ID="btnOK" runat="server" Text="验证用户" />

</div>

<ul id="list">

</ul>

</form>

运行结果图：

本文转蓬莱仙羽51CTO博客，原文链接：http://blog.51cto.com/dingxiaowei/1366362，如需转载请自行联系原作者

[Ajax]ajax学习与理解相关推荐

ajax入门学习（一）
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/54800237冷血之心的博客) ajax入门学习(一) ajax入门 ...
Ajax深度学习【详细整理黑马视频】
目录 1. 服务器的基本概念与初识Ajax 1.1 客户端与服务器 1.2 URL地址 1.3 分析网页的打开过程 1.4 服务器对外提供了哪些资源 1.5 了解Ajax 1.6 jQuery中的Aj ...
ajax入门学习（二）小案例Demo1
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/55823800冷血之心的博客) ajax入门学习(一) ajax入门 ...
如何快速入门Ajax（学习笔记）—— 原生ajax、jQuery、axios
如何快速入门Ajax 1. 服务器的基本概念客户端与服务器 URL地址网页中如何请求数据资源的请求方式 2. 了解Ajax Ajax是什么 Ajax的应用场景 3. jQuery中的Ajax g ...
数据库实训第二天笔记，jQuery的补充和ajax的学习和案例
jQuery补充 jQuery 事件 dom: <ul><li class="li1">li li</li><li class=" ...
关于ajax的学习笔记
关于ajax的学习笔记 ajax介绍 AJAX 的使用模板引擎传统方法 art-template方法原理(正则表达式) ajax技术的核心xhr 还在更新 ajax介绍 ajax 全名 asyn ...
ajax datatype_JavaScript学习笔记（二十七） ajax及ajax封装
AJAX ajax 全名 async javascript and XML 是前后台交互的能力也就是我们客户端给服务端发送消息的工具,以及接受响应的工具是一个默认异步执行机制的功能 AJAX ...
AJAX工作原理及其优缺点 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页
参考文章:https://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137180.html AJAX工作原理及其优缺点 1.什么是AJAX? AJ ...
《C++应用程序性能优化::第五章动态内存管理》学习和理解
<C++应用程序性能优化::第五章动态内存管理>学习和理解说明:<C++应用程序性能优化> 作者:冯宏华等 2007年版. 2010.8.29 cs_wuyg@126.com ...
sweet+alert+ajax,Ajax相关
Ajax Ajax的特性可以实现异步提交与局部刷新. Ajax是一门js的技术基于原生js开发的,但是用原生的js写代码过于繁琐, 我们在学的时候只学如何用jQuery实现ajax. AJAX 最 ...

[Ajax]ajax学习与理解

[Ajax]ajax学习与理解相关推荐

最新文章

热门文章