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 });