Jquery发送ajax请求的方法有很多,其中最基本的是$.ajax方法,在其之上封装的方法有 $.get, $post, $.put, $.ajaxForm, $fileUpload等。而在这些上层的方法中,后两个为jquery的插件所提供,如果需要用到的话,还需要引入对象的js库文件。这里我们记录下各方法的使用及ajax方法最原始的调用方式。

$.get方法:

1 var params = {"username":"zhangsan","password":"123"};
 2 $.get("/demo",params,function(obj){
 3     console.log(obj);
 4 },"json");
 5 
 6 $.ajax({
 7     type : "GET",
 8     url : 'http://www.baidu.com', 
 9     success : function(html){
10        console.log(html);
11     }
12 });

 

$.post方法:

1 var params={"username":"zhangsan","password":"1234"};
 2 $.post("/demo",params,function(obj){
 3     console.log(obj);    
 4 },"json");
 5 
 6 $.ajax({
 7     type : "POST",
 8     url : 'http://www.baidu.com/search', 
 9     data : {query : "javascript"},
10     contentType : "application/x-www-form-urlencoded",
11     success : function(data){
12        console.log(data);
13     }
14 });
1 //提交存json数据
 2 $.ajax({
 3     type : "POST",
 4     url : 'http://www.baidu.com/search', 
 5     data : {query : "javascript"},
 6     contentType : "application/json",
 7     success : function(data){
 8         console.log(data);
 9     }
10 });
1 //提交from数据
2 $.ajax({
3     type : "POST",
4     url : 'http://www.baidu.com/search', 
5     data : $("form").serialize(),    //不带文件的form表单
6     success : function(data){
7         console.log(data);
8     }
9 });

$.ajaxFrom方法:

1 $('form').ajaxFrom({
 2     target : '#result',
 3     beforeSubmit : function(formData, jqForm, options){
 4         console.log(options);
 5     },
 6     success : function(responseText, statusText){
 7         console.log(responseText);
 8     }
 9 });
10  
11  
12 $.ajax({      
13     type: 'POST', 
14     url: '/upload',    
15     data: new FormData($('from')[0]),    //带文件的form表单
16     contentType: false,    
17     processData: false,    
18     success: function (result) {    
19         console.log(result);    
20     },    
21     error: function (err) {    
22         console.log(err);    
23     }    
24 });

$.fileupload方法:

1 $('#fileupload').fileupload({
 2     dataType: 'json',
 3     done: function (e, data) {
 4         console.log(JSON.stringify(data));
 5     }
 6 });
 7  
 8 var fd = new FormData();
 9 fd.append('file', $('#fileupload')[0].files[0]); 
10 fd.append('file2', new File([fileBlob], 'filename.txt')); 
11 $.ajax({      
12     type: 'POST', 
13     url: '/upload',    
14     data: fd,    
15     contentType: false,    
16     processData: false,    
17     success: function (result) {    
18         console.log(result);    
19     },    
20     error: function (err) {    
21         console.log(err);    
22     }    
23 });