首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery
jQuery-Ajax的应用 load/jQuery.get/jQuery.post/jQuery.getScript/jQuery.Ajax
作者：小萝卜 2023-03-24 【 jquery 】 浏览 242
简介jQuery-Ajax的应用 load/jQuery.get/jQuery.post/jQuery.getScript/jQuery Ajax
load( url, [data], [callback] )
载入远程 HTML 文件代码并插入至 DOM 中,参数：
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
jQuery.get( url, [data], [callback] )
使用GET方式来进行异步请求,参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
jQuery.post( url, [data], [callback], [type] )
使用POST方式来进行异步请求,参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
jQuery.getScript( url, [callback] )
通过 GET 方式请求载入并执行一个 JavaScript 文件，参数:
url (String) : 待载入 JS 文件地址。
callback (Function) : (可选) 成功载入后回调函数。
jQuery Ajax 事件
Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件 和 全局事件。
全局事件：
|
方法名称 |
说明 |
|
ajaxStart() |
Ajax请求开始时执行的函数 |
|
ajaxStop() |
Ajax请求结束时执行的函数 |
|
ajaxComplete() |
Ajax请求完成时执行的函数 |
|
ajaxSend() |
Ajax请求发送时执行的函数 |
局部事件：就是在每次的Ajax请求时在方法内定义的，例如：
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});
全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery发送ajax</title>
</head>
<body>
<button id="b">发起请求</button>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$('#b').click(function(){
//发起请求
// $.get('3.php',{a:100,b:200}, function(data){
// console.log(data);
// },'json')
// $.post('3.php',{c:300,d:400}, function(data){
// console.log(data);
// },'json')
var i = 100;
$.ajax({
// //请求的脚本
url:'3.php',
type:'get',//类型
dataType:'json',//这里对服务器返回的数据进行默认操作
async:true,// true异步 false同步
data:{e:500,f:600},
success:function(data){
i = 200;
// eval('var res = '+data);
console.log(data);
},
error:function(){
alert('失败了 思密达');
},
timeout: 2000//超时时间
});
alert(i);
})
</script>
</body>
</html>
很赞哦！ (0)
下一篇：jQuery表格的应用
