jQuery(4)__jQuery基础<Ajax>
2017-08-10 16:14
453 查看
常用方法
$()传入一个函数,会执行它(功能代码块)//$(function(){xxxxxx})$(document).ready(function(){//文档加载完毕的回调函数})
$.noConflict()//var jq=$.noConflict()//避免冲突,更改调用名字
$.parseJSON()//$.parseJSON(‘{“name”:”karen”}’)//把严格模式的json字符串转为对象
$.makeArray()//将类数组(数组的有些方法不能使用比如push)对象转化为真正的数组(这时候才能使用数组的一些方法)//常见的类数组:jq对象,NodeList对象,arguments对象//注意点:类数组中的length值决定了转换后数组的长度:$.makeArray({0:”karen”,1:”46”,length:1})
getter,setter方法
1.jq设计中同一个方法,既可以当getter又可以当setter,如果传入新值(key-value)就是走的setter,如果只是传入key值,没有指定新值,则走getter方法返回当前值2.调用setter时不仅会设置value值,调用结束后还会返回当前jq对象(链式调用)
3.调用setter时,有的方法可以接受对象参数和函数参数:对象(每一个属性都指定一个键值对),函数(调用该函数来设置值,函数内部的this指向当前元素,第一个参数为当前元素的索引,第二个参数为当前元素对应的查找值,返回值为设置的新value值)
调用getter时,只会查询元素集中的第一个元素,getter不会返回调用自己的jq对象:因此注意链式调用时,中间不能有getter,只能放在末尾
一,ajax综合方法
$.ajax(options)$.ajax() 只有一个参数:配置对象,返回值为原生的XMLHttpRequest对象
例:
$.ajax({
url:'http://xxxx',
data:'count=25&maxid=2937193',
type:'GET',
success:function(data){},
error:function(){}
})
选项:(所有选项都是可选的)
----type:String//请求方式,默认get
----url:String//请求的地址
----async:Boolean//(默认: true)
默认设置下,所有请求均为异步请求。如果发送同步请求,设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
----dataType:String//预期服务器返回的数据类型。如果不指定,jQuery
将自动根据 HTTP
包 MIME 信息返回 responseXML
或 responseText,并作为回调函数参数传递,可用值:
"xml": 返回 XML
文档
"html": 返回纯文本 HTML
信息;包含 script
元素。
"script": 返回纯文本 JavaScript
代码。不会自动缓存结果。除非设置了"cache"参数
"json": 返回 JSON
数据。
如果你指定了dataType
选项,请确保服务器返回正确的MIME
信息,(如 html
返回 "text/html")。错误的 MIME
类型可能导致不可预知的错误
如果dataType设置为"script",那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)
----cache:Boolean//(默认: true,dataType为script时默认为false),设置为
false 将不会从浏览器缓存中加载请求信息。
----contentType:String//(默认:"application/x-www-form-urlencoded")
发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
----data:String//发送的参数:"count=25&maxid=29448"。可以填对象,但是属性值如果为数组,jQuery
将自动为不同值对应同一个名称。如:{karen:["46","singer"]}
转换为'&karen=46&karen=singer'
----error:function//请求失败时的回调
function (XMLHttpRequest, textStatus, errorThrown) {
//参数:XMLHttpRequest
对象、错误状态、捕获的错误对象
// 通常 textStatus
和 errorThrown
之中只有一个会包含信息
//this指向$.ajax(options)的options参数对象
}
----timeout:times//超时时间,单位毫秒.如果设置该选项,当请求没有在指定时内完成,请求会取消并触发error回调,回调状态码为'timeout',默认为0:请求完成之前永不取消
//function(data,)
----success:function//请求成功的回调,三个参数:第一个响应的数据(服务器响应的是什么类型的数据,这里就是对应的类型:比如响应json那这里就是json格式的数据,响应script这里就是加载的js文本).
第二个jq状态码,一般都是"success".
第三个发送请求的XMLHttpRequest对象,如果是js的请求(dataType:’script’),第三个参数是没有值得
二,抽象出来的单一方法
----load()方法通过AJAX
请求从服务器加载数据,并把返回的数据放置到指定的元素中
$(element).load(url,data,function(response,status,xhr))
url:地址
data:可选,发送的参数。
function(response,status,xhr)
可选,请求完成时的回调
response:结果数据
status:请求的状态("success","error", "timeout"
或 "parsererror")
xhr:XMLHttpRequest对象
例:
$("#btn1").click(function(){
$("div1").load('test.txt')
})
-----$.get(url,data,callback(response,status,xhr))//如果需要请求出错时的回调函数,请使用 $.ajax方法
url
必需。
data(可选)发送到服务器的参数
success(response,status,xhr)
可选。请求成功的回调函数
response
结果数据
status
请求的状态
xhr XMLHttpRequest
对象
例:
$.get('http://xxx',function(data){console.log(data)})
----$.getJSON(url,callback(data,status,xhr))//如果需要请求出错时的回调函数,请使用 $.ajax方法
url
必需。地址//注意jsonp的请求:http://xxxxx?name=kraren&callback=?问号就填为问号,随机帮我们取名字,然后数据帮我们封装到回调函数的data里
callback(data,status,xhr)
可选。成功的回调函数
data结果数据
status请求的状态
----$.post(url,data,callback(data, textStatus,jqXHR),dataType)
//如果需要请求出错时的回调函数,请使用$.ajax方法
url
必需,请求地址
data//(可选)待发送 Key/value
参数
success(data, textStatus, jqXMLHttpRequest)//(可选)请求成功时执行的回调函数。(回调函数的参数就不讲了)
dataType//(可选)规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script
或 html)
相关文章推荐
- ajax 回调 + tp +<ul> + jquery + js搜索
- 最简单最实用的ajax(一)基础通用ajax <转>
- [ASP.NET Ajax] ECMAScript基础类以及Asp.net Ajax对类<Object>的扩展
- Jquery_Ajax 注册验证(Struts2)<学习随笔>
- Ajax实现下拉框级联(在servlet中把从数据库取出来的值以json形式返回ajax,用jquery遍历便利更新<option>的值)
- 使用 jQuery 简化 Ajax 开发<转>
- jQuery——jQuery基础方法first()/last()/not(CSS选择器)/even/odd/eq(index)/gt(index)/lt(index)
- 30分钟学会使用jQuery的Ajax功能<一>
- 当使用JQuery的"$",抛异常Uncaught TypeError: Object #<Object> has no method 'ajax'
- jquery基础,隐藏 HTML 文档中所有的 <p> 元素
- java 从零开始,学习笔记之基础入门<Jquery>(四十三)
- <记录>Jquery + TP +Ajax 验证用户名是否注册
- Jquery_Ajax 注册验证(Struts2)<学习随笔>
- <html5+css3+js>jquery基础
- jQuery(3)__jQuery基础<事件>
- JQuery,ajax异步加载<select><option></option></select>多选框:
- JQuery.Ajax之错误调试帮助信息 <转>
- 读<jquery 权威指南>[4]-Ajax
- [ASP.NET Ajax] ECMAScript基础类以及Asp.net Ajax对类<Object>的扩展
- jQuery(1)__jQuery基础<对象,元素,属性>