jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQuery $.ajax()

jQuery中$.ajax()方法的具体使用

作者：ren202009

本文主要介绍了jQuery中$.ajax()方法的具体使用，$.ajax(url,[settings])通过 HTTP 请求加载远程数据，文中通过示例代码详细的介绍了$.ajax()的用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1 Ajax操作

1.1 $.ajax

jQuery对象上面还定义了Ajax方法（$.ajax()），用来处理Ajax操作。调用该方法后，浏览器就会向服务器发出一个HTTP请求。

$.ajax(url,[settings]);通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax()可以不带任何参数直接使用。注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

$.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请求已结束。');
}

上面代码的对象参数有多个属性，含义如下：

这些参数之中，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&param2=value2...'
}});

1.2 简便写法

ajax方法还有一些简便写法。

一般来说，这些简便方法依次接受三个参数：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事件的回调函数。

下面是示例。

$('#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根本没有考虑到国际化的问题，而使用了欧洲的字符集，所以传递中文时才会出现乱码

到此这篇关于jQuery中$.ajax()方法的具体使用的文章就介绍到这了,更多相关jQuery $.ajax()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文