• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery Ajax使用 全解析

jQuery Ajax使用 全解析

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了Ajax等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

url (String) : 请求的HTML页的URL地址。

data (Map) : (可选参数) 发送至服务器的 key/value 数据。

callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。

这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

这个方法可以很方便的动态加载一些HTML文件,例如表单。

示例代码:

$(".ajax.load").load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html .post",

            function (responseText, textStatus, XMLHttpRequest){

            this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]

            //alert(responseText);//请求返回的内容

            //alert(textStatus);//请求状态:success,error

            //alert(XMLHttpRequest);//XMLHttpRequest对象

            });

 

这里将显示结果。

 

注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。

 

2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){

            //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.

            this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图

            alert(data);

            //alert(textStatus);//请求状态:success,error等等。
                                  当然这里捕捉不到error,因为error的时候根本不会运行该回调函数

            //alert(this);

            });

点击发送请求:

jQuery.get()回调函数里面的 this ,指向的是Ajax请求的选项配置信息:

 

3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

 

参数:

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:

Ajax.aspx:

Response.ContentType = "application/json";

            Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");

jQuery 代码:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },

            function (data, textStatus){

            // data 可以是 xmlDoc, jsonObj, html, text, 等等.

            //this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this

            alert(data.result);

            }, "json");

点击提交:

这里设置了请求的格式为"json":

如果你设置了请求的格式为"json",此时你没有设置Response回来的ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

注意一下,alert(data.result); 由于设置了Accept报头为“json”,这里返回的data就是一个对象,并不需要用eval()来转换为对象。

 

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • jQuery 常见小例汇总
  • jQuery实现“扫码阅读”功能
  • 基于jquery的跨域调用文件
  • JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
  • jQuery用noConflict代替$的实现方法
  • JQ技术实现注册页面带有校验密码强度
  • 基于jQuery的图片左右无缝滚动插件
  • jQuery实现Select下拉列表进行状态选择功能
  • Jquery下:nth-child(an+b)的使用注意
  • jquery统计复选框选中示例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jqPlot 基于jquery的画图插件
    • Jquery 动态生成表格示例代码
    • jQuery组件easyui对话框实现代码
    • 详解Jquery的事件操作和文档操作
    • 使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
    • jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
    • jQuery简单实现图片预加载
    • 浅析onsubmit校验表单时利用ajax的return false无效问题
    • jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
    • jquery实现的一个简单进度条效果实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有