jQuery.ajax的简单应用实例附实例下载

最新推荐文章于 2025-12-04 23:20:36 发布

转载最新推荐文章于 2025-12-04 23:20:36 发布 · 304 阅读

文章标签：

#xmlhttprequest #function #ajax #jquery #string #服务器

javase 专栏收录该内容

806 篇文章

订阅专栏

本文介绍 jQuery AJAX 的基本使用方法，通过一个简单的示例演示如何使用 $.ajax() 方法从服务器获取数据并更新页面内容。

======================================================
注：本文源代码点此下载
======================================================

先来看看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文件的部分代码:

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函数,下面来看这个函数代码:

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文件部分代码:

//返回类型

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的开发,实现页面无刷新从服务器获取数据。

下载这个实例。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/