先来看看jQuery.ajax(options)的简单介绍:
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。
返回值:
XMLHttpRequest
参数:
options (可选) : AJAX 请求设置。所有选项都是可选的。
选项(只对此实例用到的选项进行解释):
type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
url (String) : (默认: 当前页地址) 发送请求的地址。
data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。
必须为 Key/Value格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 Ajax 事件.
success (Function) : 请求成功后回调函数。参数:服务器返回数据,数据格式。 Ajax 事件。
实例:
用$.ajax()提交两个数值并返回这两个数值的和。
本实例使用jQuery 1.4.2类库。
先看HTML文件的部分代码:
<!--<br/ />
<br/ />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />
http://www.CodeHighlighter.com/<br/ />
<br/ />
--><body>
<form id="form1" runat="server">
<div style="font-size:12px; padding-left:15px; padding-top:15px;">
<input type="button" id="btn_ok" value="测试" onclick="FunAjax()" />
<span id="span_content">显示结果</span>
</div>
</form>
</body>
当点击"测试"按钮时触发FunAjax函数,下面来看这个函数代码:
<!--<br/ />
<br/ />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />
http://www.CodeHighlighter.com/<br/ />
<br/ />
-->function FunAjax()
{
$.ajax({
type: "POST",
url: "jQueryAjaxTest.ashx",
data: "begin=1&end=9",
beforeSend: function(){
$("#span_content").text("数据处理中...");
},
success: function(msg){
$("#span_content").text("两个数的和为: " + msg);
}
});
}
FunAjax函数利用$.ajax()调用了jQueryAjaxTest.ashx文件,并通过data选项向 jQueryAjaxTest.ashx文件传递了两个数值,即begin=1&end=9,jQueryAjaxTest.ashx文件将返回这两个数值相加的结果,jQueryAjaxTest.ashx文件部分代码:
<!--<br/ />
<br/ />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />
http://www.CodeHighlighter.com/<br/ />
<br/ />
--> //返回类型
context.Response.ContentType = "text/plain";
int iBegin = 0;
int iEnd = 0;
//接收参数
int.TryParse(context.Request["begin"].ToString(), out iBegin);
int.TryParse(context.Request["end"].ToString(), out iEnd);
Thread.Sleep(1000); //为了能体现加载过程,在此我将程序延迟了一秒钟
//计算并返回结果
context.Response.Write((iBegin+iEnd).ToString());
这个实例只是$.ajax()的一个很简单的应用,但很大程度上简化了AJAX的开发,实现页面无刷新从服务器获取数据。
下载这个实例。
分享到:
相关推荐
Jquery ajax 读取txt文件 Jquery分页 Jquery ajax 读取txt文件 Jquery分页
php 用jquery ajax登陆,这是一个最简单的jquery ajax登陆实例,看了这个相信聪明的你能写出更好的东东!
Struts2+jQuery ajax的一个商品小系统Struts2+jQuery ajax的一个商品小系统
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
jquery ajax 异步传值并把值赋予在div标签内 很简单的jquery ajax异步传值 让您清楚了解jquery ajax运作 点击按钮的时候 程序会通过ajax去获取某个PHP文件的输出值 获取PHP文件的输出值的那一刻下面的程序会继续执行...
实现Jquery Ajax 三种方案进行前后台数据传输,界面内容传值及返回值实例!
Jquery Ajax动态增删改查,Jquery Ajax
JQuery ajax的各种使用方法示例和说明 本示例程序由VS2010建立 c# asp.net ajax demo
jqueryAjax_无刷新调用另一页实例 要放在asp,jsp ,php 运行环境里
Jquery ajax 获取验证码的项目代码
jquery ajax源代码
jQuery Ajax 实例 全解析; jQuery Ajax 实例 全解析;
传智播客 jQuery ajax 课件
其中包含6款Ajax分页Demo,文字分页、图片分页都可以。具有一定特效、很炫。基本已经满足各种web分页开发了。
mvc jquery Ajax,用户登录,无刷新分页。数据库为sql 2005备份文件,在sql 2005_bak文件夹下。各位前辈看了,对不合理的请指教。
一个简单的jquery ajax 实现页面与后台的无刷验证
JQueryAjax经常使用到的jar包集合
Jquery Ajax调用.ashx或.cs文件来实现简易的计算器
asp.net jquery ajax 全国省市区三级联动