JQuery Ajax详解
Posted code_____monkey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery Ajax详解相关的知识，希望对你有一定的参考价值。
function test_ajax()
$.ajax(
type:"GET",//通常会用到两种：GET,POST。默认是：GET
url:"a.php",//(默认: 当前页地址) 发送请求的地址
dataType:"html",//预期服务器返回的数据类型。
beforeSend:beforeSend, //发送请求
success:callback, //请求成功
error:error,//请求出错
complete:complete//请求完成
);
function error(XMLHttpRequest, textStatus, errorThrown)
// 通常情况下textStatus和errorThown只有其中一个有值
$("#showResult").append("<div>请求出错啦！</div>");
function beforeSend(XMLHttpRequest)
$("#showResult").append("<div><img src='loading.gif' /><div>");
function complete(XMLHttpRequest, textStatus)
$("#showResult").remove();
function callback(msg)
$("#showResult").append("<div>请求成功，回传数:"+msg+"<div>");
--------------------设置同步异步--------------------
$.post() 和 $.get() 如何同步请求
由于$.post() 和 $.get() 默认是 异步请求，如果需要同步请求，则可以进行如下使用：
在$.post()前把ajax设置为同步：$.ajaxSettings.async = false;
在$.post()后把ajax改回为异步：$.ajaxSettings.async = true;
原文链接：https://blog.csdn.net/sunnyzyq/article/details/78730894
————————————————
----------post请求----------------------
$.ajax(
url:httpUrl+"/api/auth/login",
type:"post", //请求方式
data:JSON.stringify(form),
contentType:"application/json", //缺失会出现URL编码，无法转成json对象
success:function(data)
,
error: function (e) //请求失败，包含具体的错误信息
,complete: function (XMLHttpRequest,status)
);
--------------------get 请求----------------------------
$.ajax(
type: "GET",
contentType: "application/json;charset=UTF-8",
url: httpUrl + "/find",
data: "",
dataType: 'json',
success: function (result)
,
error: function (e) //请求失败，包含具体的错误信息
console.error(e.status);
console.error(e.responseText);
swal("网络错误","","error");
);
$.ajax(
url: httpUrl + '/findTable/'+sourceTable,
type: 'get',
async: false, //默认设置为true，所有请求均为异步请求。
dataType: 'json',
success: function (res)
,
error: function (XMLHttpRequest)
);
$.ajax(
url: httpUrl + "/matedata/scheduler/unusual/discard/" + id,
type: "get",
success: function (res)
);
$.ajax(
url:httpUrl+"/matedata/itfs/ele/queryElectricityByCustomerNo"+'?auth_id='+authId,
type:"get",
timeout: 1000, //设置本地的请求超时时间（以毫秒计）。此设置将覆盖$.ajaxSetup()方法的全局设置。
success:function(data)
,
error: function (e) //请求失败，包含具体的错误信息
swal("网络错误","","error");
,
complete: function (XMLHttpRequest,status)
);
--发送json
let dirAbsolutePath = $('#goParentPath').attr('value')
let param = 'dirAbsolutePath': dirAbsolutePath, 'dirName': dirName
$.ajax(
url: httpUrl + '/api/manage/dir/create',
type: 'get',
dataType: 'json',
data:param,
success: function (res)
if(res.code==0)
else
lightyear.notify('服务异常', 'warning', 100, 'mdi mdi-emoticon-sad', 'top','');
,
error: function (e)
console.log(e.status);
console.log(e.responseText);
lightyear.notify('网络错误', 'danger', 100, 'mdi mdi-emoticon-sad', 'top','');
,
complete: function (XMLHttpRequest,status)
);
服务器接收：@RequestParam String dirAbsolutePath, @RequestParam String dirName
------------put 请求--------------
$.ajax(
url:httpUrl+"front",
type:"put",
data:JSON.stringify(json),
contentType:"application/json", //缺失会出现URL编码，无法转成json对象
success:function(data)
);
-----------delete 请求---------------
$.ajax(
type: "DELETE",
contentType: "application/json;charset=UTF-8",
url: httpUrl + "/Domain/" + id,
data: JSON.stringify(),
success: function (result)
,
//请求失败，包含具体的错误信息
error: function (e)
console.log(e.status);
console.log(e.responseText);
layer.msg("网络错误");
);
-----------------------------
$.ajaxFrom方法：
$('form').ajaxFrom(
target : '#result',
beforeSubmit : function(formData, jqForm, options)
console.log(options);
,
success : function(responseText, statusText)
console.log(responseText);
);
$.ajax(
type: 'POST',
url: '/upload',
data: new FormData($('from')[0]), //带文件的form表单
contentType: false,
processData: false,
success: function (result)
console.log(result);
,
error: function (err)
console.log(err);
);$.fileupload方法：
$('#fileupload').fileupload(
dataType: 'json',
done: function (e, data)
console.log(JSON.stringify(data));
);
var fd = new FormData();
fd.append('file', $('#fileupload')[0].files[0]);
fd.append('file2', new File([fileBlob], 'filename.txt'));
$.ajax(
type: 'POST',
url: '/upload',
data: fd,
contentType: false,
processData: false,
success: function (result)
console.log(result);
,
error: function (err)
console.log(err);
);回调函数
如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。
beforeSend
在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
beforeSend: function(XMLHttpRequest)
error
在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
error: function (e) //请求失败，包含具体的错误信息 error(xhr,status,error)
console.log(e.status);
console.log(e.responseText);
lightyear.notify('网络错误', 'danger', 100, 'mdi mdi-emoticon-sad', 'top','');
,
dataFilter
在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。
dataFilter:function(data, type)
return data;
success
当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
success:function(data) //success(result,status,xhr)
if(data.code==0)
else if(data.code==-1)
console.error(data.message);
else
lightyear.notify(data.message, 'danger', 100, 'mdi mdi-emoticon-sad', 'top','');
,
complete
当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。
,complete: function (XMLHttpRequest,status)
------其他文件上传查看 文件上传的文章-----------
jquery + springboot文件上传_yonghutwo的专栏-CSDN博客
以上是关于JQuery Ajax详解的主要内容，如果未能解决你的问题，请参考以下文章