首页 > 代码库 > ajax笔记

ajax笔记

2024-11-14 21:40:02   203人阅读

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

一、$.ajax的一般格式

1 $.ajax({
2     type: ‘POST‘,
3     url: url ,
4     data: data ,
5     success: success ,
6     dataType: dataType
7 });

 

二、$.ajax的参数描述

url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。
type(可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

 

三、GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

四、$.ajax需要注意的一些地方：
  1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。
  2.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

 

jQuery Ajax 事件

Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。

局部事件就是在每次的Ajax请求时在方法内定义的，例如：

1  $.ajax({
2    beforeSend: function(){
3      // Handle the beforeSend event
4    },
5    complete: function(){
6      // Handle the complete event
7    }
8    // ...
9  });

 

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：

1 $("#loading").bind("ajaxSend", function(){
2    $(this).show();
3  }).bind("ajaxComplete", function(){
4    $(this).hide();
5  });

 

或者：

1 $("#loading").ajaxStart(function(){
2    $(this).show();
3  });

 

我们可以在特定的请求将全局事件禁用，只要设置下 global 选项就可以了：

1  $.ajax({
2    url: "test.html",
3    global: false,// 禁用全局Ajax事件.
4    // ...
5  });

 

ajax中data参数的传递

 1 function test(map){
 2 
 3  $.ajax({
 4         type : "POST",
 5         url : url,
 6         async:true,
 7         dataType:‘json‘,
 8         data: map, 
 9         error : function(){},
10         success : function(data) {
11         .......
12         }    
13     });
15 } 
16 
17 function test2(){
18 var id = $("#id").val();  //通过表单元素id取值。
19 
20 var name = $("#name").val();
21 
22 var map = "id="+id+" &name="+name;  //参数之间用“&”隔开。这里注意连接符是用：“&” ，而不是“，”今天就放了一个错，用错了符号。
23 test(map);
24 
25 }

 

ajax笔记


联系
我们