目录
1 Ajax操作
1.1 $.ajax
jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作。调用该方法后,浏览器就会向服务器发出一个HTTP请求。
$.ajax()的用法主要有两种。
$.ajax(url[, options])
$.ajax([options])
上面代码中的url,指的是服务器网址,options则是一个对象参数,设置Ajax请求的具体参数。
$.ajax({
async: true,
url: '/url/to/json',
type: 'GET',
data : { id : 123 },
dataType: 'json',
timeout: 30000,
success: successCallback,
error: errorCallback,
complete: completeCallback,
statusCode: {
404: handler404,
500: handler500
}
})
function successCallback(json) {
$('<h1/>').text(json.title).appendTo('body');
}
function errorCallback(xhr, status){
console.log('出问题了!');
}
function completeCallback(xhr, status){
console.log('Ajax请求已结束。');
}
上面代码的对象参数有多个属性,含义如下:
- accepts:将本机所能处理的数据类型,告诉服务器。
- async:该项默认为true,如果设为false,则表示发出的是同步请求。
- beforeSend:指定发出请求前,所要调用的函数,通常用来对发出的数据进行修改。
- cache:该项默认为true,如果设为false,则浏览器不缓存返回服务器返回的数据。注意,浏览器本身就不会缓存POST请求返回的数据,所以即使设为false,也只对HEAD和GET请求有效。
- complete:指定当HTTP请求结束时(请求成功或请求失败的回调函数,此时已经运行完毕)的回调函数。不管请求成功或失败,该回调函数都会执行。它的参数为发出请求的原始对象以及返回的状态信息。
- contentType:发送到服务器的数据类型。
- context:指定一个对象,作为所有Ajax相关的回调函数的this对象。
- crossDomain:该属性设为true,将强制向相同域名发送一个跨域请求(比如JSONP)。
- data:向服务器发送的数据,如果使用GET方法,此项将转为查询字符串,附在网址的最后。
- dataType:返回值类型,服务器返回的数据类型,可以设为text、html、script、json、jsonp和xml。
- error:请求失败时的回调函数,函数参数为发出请求的原始对象以及返回的状态信息。
- headers:指定HTTP请求的头信息。
- ifModified:如果该属性设为true,则只有当服务器端的内容与上次请求不一样时,才会发出本次请求。
- jsonp:指定JSONP请求“callback=?”中的callback的名称。
- jsonpCallback: 指定JSONP请求中回调函数的名称。
- mimeType:指定HTTP请求的mime type。
- password:指定HTTP认证所需要的密码。
- statusCode:值为一个对象,为服务器返回的状态码,指定特别的回调函数。
- success:请求成功时的回调函数,函数参数为服务器传回的数据、状态信息、发出请求的原始对象。
- timeout: 等待的最长毫秒数。如果过了这个时间,请求还没有返回,则自动将请求状态改为失败。
- type:向服务器发送信息所使用的HTTP动词,默认为GET,其他动词有POST、PUT、DELETE。
- url:服务器端网址。这是唯一必需的一个属性,其他属性都可以省略。
- username:指定HTTP认证的用户名。
- xhr:指定生成XMLHttpRequest对象时的回调函数。
这些参数之中,url可以独立出来,作为ajax方法的第一个参数。也就是说,上面代码还可以写成下面这样。
$.ajax('/url/to/json',{
type: 'GET',
dataType: 'json',
success: successCallback,
error: errorCallback
})
作为向服务器发送的数据,data属性也可以写成一个对象。
$.ajax({
url: '/remote/url',
data: {
param1: 'value1',
param2: 'value2',
...
}
});
// 相当于
$.ajax({
url: '/remote/url?param1=value1¶m2=value2...'
}});
1.2 简便写法
ajax方法还有一些简便写法。
- $.get():发出GET请求。
- $.getScript():读取一个JavaScript脚本文件并执行。
- $.getJSON():发出GET请求,读取一个JSON文件。
- $.post():发出POST请求。
- $.fn.load():读取一个html文件,并将其放入当前元素之中。
一般来说,这些简便方法依次接受三个参数:url、数据、成功时的回调函数。
1.2.1 $.get(),$.post()
这两个方法分别对应HTTP的GET方法和POST方法。
$.get('/data/people.html', function(html){
$('#target').html(html);
});
$.post('/data/save', {name: 'Rebecca'}, function (resp){
console.log(JSON.parse(resp));
});
get方法和post方法的参数相同,第一个参数是服务器网址,该参数是必需的,其他参数都是可选的。第二个参数是发送给服务器的数据,第三个参数是操作成功后的回调函数。
上面的post方法对应的ajax写法如下。
$.ajax({
type: 'POST',
url: '/data/save',
data: {name: 'Rebecca'},
dataType: 'json',
success: function (resp){
console.log(JSON.parse(resp));
}
});
1.2.2 $.getJSON()
ajax方法的另一个简便写法是getJSON方法。当服务器端返回JSON格式的数据,可以用这个方法代替$.ajax方法。
$.getJSON('url/to/json', {'a': 1}, function(data){
console.log(data);
});
上面的代码等同于下面的写法。
$.ajax({
dataType: "json",
url: '/url/to/data',
data: {'a': 1},
success: function(data){
console.log(data);
}
});
1.2.3 $.getScript()
$.getScript方法用于从服务器端加载一个脚本文件。
$.getScript('/static/js/myScript.js', function() {
functionFromMyScript();
});
上面代码先从服务器加载myScript.js脚本,然后在回调函数中执行该脚本提供的函数。
getScript的回调函数接受三个参数,分别是脚本文件的内容,HTTP响应的状态信息和ajax对象实例。
$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){
console.log( data ); // test.js的内容
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
});
getScript是ajax方法的简便写法,因此返回的是一个deferred对象,可以使用deferred接口。
jQuery.getScript("/path/to/myscript.js")
.done(function() {
// ...
})
.fail(function() {
// ...
});
1.3 Ajax事件
jQuery提供以下一些方法,用于指定特定的AJAX事件的回调函数。
- .ajaxComplete():ajax请求完成。
- .ajaxError():ajax请求出错。
- .ajaxSend():ajax请求发出之前。
- .ajaxStart():第一个ajax请求开始发出,即没有还未完成ajax请求。
- .ajaxStop():所有ajax请求完成之后。
- .ajaxSuccess():ajax请求成功之后。
下面是示例。
$('#loading_indicator')
.ajaxStart(function (){$(this).show();})
.ajaxStop(function (){$(this).hide();});
下面是处理Ajax请求出错(返回404或500错误)的例子。
$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});
1.4 返回值
ajax方法返回的是一个deferred对象,可以用then方法为该对象指定回调函数(详细解释参见《deferred对象》一节)。
$.ajax({
url: '/data/people.json',
dataType: 'json'
}).then(function (resp){
console.log(resp.people);
})
1.5 中文乱码
1.5.1 解决方法一
js文件中使用encodeURI()方法。
var url = "Validate.jsp?id=" + encodeURI(encodeURI(idField.value));
2.在后台中对传递的参数进行URLDecoder解码
String username = URLDecoder.decode(request.getParameter("id"),"UTF-8")
1.5.2 解决方法二
当网站页面不是utf-8编码时,ajax提交的中文便会变成乱码。
解决方法如下:找到jquery.js里的contentType:application/x-www-form-urlencoded,将它改成contentType:application/x-www-form-urlencoded; charset=UTF-8就可以了。
原因:未指定charset时,jquery使用ISO-8859-1,ISO8859-1,通常叫做Latin-1。Latin-1包括了书写所有西方欧洲语言不可缺少的附加字符。jquery的ajax根本没有考虑到国际化的问题,而使用了欧洲的字符集,所以传递中文时才会出现乱码
今天的文章ajax 方法_ajax请求的五个步骤分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/72149.html