jQuery $.ajax()方法的使用

前面几节，我们介绍了很多有关 Ajax 的方法，如 load()方法、$.getJSON() 方法、$.get() 方法、$.post() 方法。事实上，这几种方法从本质上来说都是使用 $.ajax() 方法来实现的。换句话来说，它们都是 $.ajax() 方法的简化版，它们能实现的功能，$.ajax() 都能实现，因为 $.ajax() 是最底层的方法。

语法：

$.ajax(options)

$.ajax() 方法只有一个参数，这个参数是一个对象。该对象中包含了 Ajax 请求所需要的各种信息，并且以 键值对 的形式存在。

options 是一个对象，这个对象内部有很多参数可以设置，所有参数都是可选的，如表 1 所示。

图 1：默认效果

我们点击【获取数据】按钮后，此时预览效果如图 2 所示。

图 2：单击按钮后的效果

分析：

$.ajax({

 url: info.json ,

 type: get ,

 dataType: json ,

 success:function(data){

})

上面这段代码其实等价于：

$.getJSON( info.json , function (data) {

})

举例：$.ajax() 代替 $.getScript()

 !DOCTYPE html 

 html 

 head 

 meta charset= utf-8 / 

 title /title 

 script src= js/jquery-1.12.4.min.js /script 

 script 

 $(function(){

 $( #btn ).click(function(){

 $.ajax({

 url: js/test.js ,

 type: get ,

 dataType: script 

 /script 

 /head 

 body 

 input id= btn type= button value= 加载 / 

 /body 

 /html 

默认情况下，预览效果如图 3 所示。

图 3：默认效果

我们点击【加载】按钮后，可以看到控制台输出信息如图 4 所示。

图 4：控制台输出信息

分析：
一开始控制台是没有内容输出的，我们点击【加载】按钮后，才会尝试加载 test.js 这个文件。

$.ajax({

 url: js/test.js ,

 type: get ,

 dataType: script 

})

上面这段代码其实等价于：

$.getScript( js/test.js )

23905.html

htmljavaJavaScript