jQuery jQuery速成 - Ajax请求 (讲解篇)

[复制链接]
攻城狮 发表于 2015-9-12 19:52:51 [jQuery] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
jQuery的Ajax教程对大家讲解jQuery Ajax的函数(方法)进行说明,另一节课直接通过示例来为大家进行更详细的说明。以此类推,一节课内容和介绍,另一节课案例实战。

本节课内容稍多,肯定会有很多人一看下面那么多属性、参数、键值对就会对自己产生了疑问或者不自信,我给大家的建议是只需了解即可不必深究,下节课我们便会对今天学习的内容进行小练一把。

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

url:待装入 HTML 网页地址

data:(可选) 发送至服务器的key/value(键值对) 数据。

callback: (可选) 载入成功时回调函数。过去并没有对回调函数进行说明,今天稍微的说一下,jQuery中的回调函数意思是指当某个操作执行完毕后要执行的函数。

举例:
    要求:1、随便建立两个页面,假设为A.html和B.html
            2、在B中随便写几个DIV
            3、推荐在A.html中定义B中的DIV样式,因为$("html").load()只载入HTML不会载入【外链】样式。
    写法:
            $
            (
                  function()
                  {
                         $("html").load("B.html");
                  }
            );


$.get(url,[data],[callback])
方法说明:简单的 Get 的请求,

url: 请求 HTML 网页地址

data:(可选) 发送至服务器的key/value(键值对) 数据。

callback: (可选) 载入成功时回调函数。

$.post(url,[data],[callback])
方法说明:简单的 Post 请求,

url: 请求 HTML 网页地址

data:(可选) 发送至服务器的key/value(键值对) 数据。

callback: (可选) 载入成功时回调函数。

$.getJSON(url,[data],[callback])
方法说明:简单的 GET 请求载入 JSON 数据

url: 请求 HTML 网页地址

data:(可选) 发送至服务器的key/value(键值对) 数据。

callback: (可选) 载入成功时回调函数。

$.getScript(url,[callback])
方法说明:简单的 GET 请求载入 script 脚本数据并执行

url: 请求 HTML 网页地址

data:(可选) 发送至服务器的key/value(键值对) 数据。

callback: (可选) 载入成功时回调函数。

$.Ajax(options)
//此方法只要用于返回创建的 XMLHttpRequest 对象。大家如果看了jQuery API对Ajax的参数的讲解,肯定会觉得此方法
的内容较多,其实此方法只有一个值,是key/value(也就是我们常说的“键值对”),下面将对此方法的参数进行逐一讲解。

注意:参数options是可选的其中键值对也都是可选的。

async://Boolean类型 此键值对默认情况下为true,也就是异步请求(局部刷新);如果设置为false,将会变成同步请求,那么此时将会锁住浏览器,用户无法对其进行其他操作,必须等待请求完毕后才会解锁。

global (Boolean类型) //表示是否触发全局,默认为触发(true),Ajax的全局设置将在后面的章节讲,设置全局则表示所有的Ajax将能够使用此全局内容,比如所有的Ajax事件都触发同一个路径。

type (String) : //(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

cache:(Boolean类型) //设置false将不会从浏览器缓存中加载信息,用于jQuery1.2或更高的版本。

contentType:(String类型) //用于设置编码格式,默认为: "application/x-www-form-urlencoded")格式,一般推荐此格式。

ifModified (Boolean) : //(默认: false) 仅在服务器数据改变时获取新数据。

processData (Boolean) : // (默认: true) 默认情况下,发送的数据将被转换为对象。

timeout (Number) ://设置置请求超时时间(毫秒)。此设置为全局设置。

dataType:(String类型) //用于设置服务器返回的数据类型,但填写的内容也是有限制的,可用值如下
                 ┠xml //设置此值服务器端将XML文档,如果大家对Ajax比较了解,我想大家也知道Ajax中的x代表是什么了吧?因此叫做A(Asynchronous)j(javascript)a(and)x(xml)
                 ┠html //服务器返回HTML格式文档,(根据个人理解,如果按照遭上面的理解xml表示x的话,那么此类型不就表示ajah了嘛)。
                 ┠script //服务器返回【纯文本】的脚本,不会执行或进行计算。
                 ┠json //返回Json格式的文档
                 ┠text //返回纯文本
                 ┗jsonp //JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问,比如用户想得到["kwoojan","KwooShung"],如果设置了jsonp那么服务器将返回callbackFunction(["kwoojan","KwooShung"])

data(String类型) //此方法至关重要,主要用于将数据发送至服务器。格式为键值对,如userName=站帮网&Address=http://www.zb7.com/ 那么服务器接受到的userName相对应的值就是站帮网

url (String) :// (默认: 当前页地址) 发送请求的地址,也就是你的data数据需要被处理的地址。

beforeSend(function) //此键值为函数方法,当你发送请求之前调用此方法。例如当用户进行了某个操作,这时页面上显示出“正在加载中,请稍后”等类似的字样,多数情况下此键值对用于给予用户友好的提示。

success (Function) //当Ajax请求成功时,调用此方法,一般用于解析服务器所返回的数据。

error (Function) //求失败时调用此方法。

complete (Function) //当Ajax请求完毕的时候调用此方法。











上一篇:jQuery速成 - 工具杂项
下一篇:jQuery速成 - Ajax请求 (实战篇)

大神点评9

安赛儿 发表于 2015-9-17 17:44:43 [jQuery] 显示全部楼层
这个帖子很棒哦
dwfz 发表于 2015-9-19 10:39:35 [jQuery] 显示全部楼层
好东西值得学习
热播电视剧http://www.hunan18.com
邦妮儿 发表于 2015-9-24 12:23:14 [jQuery] 显示全部楼层
写的很好哦。要是到课工场学习一下就更好了,http://www.kgc.cn
a0732w 发表于 2015-10-7 01:18:31 [jQuery] 显示全部楼层
强烈支持,站帮网有你更精彩

http://www.xicxi.com
www.xicxi.com
www.gzgkgd.com
邦妮儿 发表于 2015-10-9 13:34:00 [jQuery] 显示全部楼层
课工场是互联网教育践行者,针对互联网企业岗位提供在线直播,视频教程和多种形式的教学服务,帮助学习者快速进入互联网行业,并不断引进国内外先进的在线教育理念和技术,努力打造国内在线学习平台第一品牌
luccccc17 发表于 2015-10-9 23:27:36 [jQuery] 显示全部楼层
感谢楼主的分享,受益良多
邦妮儿 发表于 2015-10-14 16:10:25 [jQuery] 显示全部楼层
高品质互联网教育,靠谱在线教育服务_课工场
邦妮儿 发表于 2015-10-25 16:26:46 [jQuery] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
zb7ang 发表于 2019-6-10 15:25:55 [jQuery] 显示全部楼层
不错,谢谢分享!
大家足球 -> www.dajiazuqiu.com
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

攻城狮

站帮资深版主

  • 356 积分
  • 71 帖数
  • 0 日志
广告招商 QQ: 5620010
快速回复 返回顶部 返回列表