jQuery Ajax()方法之简单&通俗&易懂

最新推荐文章于 2023-12-14 23:57:24 发布

CLFuture

最新推荐文章于 2023-12-14 23:57:24 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax jQuery 文章标签： JQuery Ajax方法

本文链接：https://blog.youkuaiyun.com/m0_37510446/article/details/90295019

jQuery 同时被 2 个专栏收录

13 篇文章

订阅专栏

Ajax

9 篇文章

订阅专栏

这篇我们来使用jQuery+Ajax方法来执行异步请求
一Ajax（）方法：
$.ajax({name:value,name:value,})
可以看到，该请求中的参数是可以有一个或者多个参数，并且以类似键值对的形式存在
下面简介几个常用的参数：
type:设置对应的请求类型，GET或者POST
contentType:设置发送数据到服务器的数据类型，常用json类型是：“application/json"
url:请求地址
cache:设置是否缓存请求页面
data:设置要发送到服务器的参数数据
dataType:服务器的预期返回数据类型
dataFilter（data,type):用于处理XMLHttpRequest原始响应数据的函数，意思就是对原始的响应数据进行处理
name:规定在HTTP认证访问请求中使用的姓名
password:规定在HTTP认证访问请求中使用的密码
xhr:XMLHttpRequest的缩写，用于创建XMLHttpRequest对象的函数
success(result,status,xhr）:请求成功时运行的函数，此处与load中的callback参数变形而已，可以联合理解
error(xhr,status,error)，请求失败时运行的函数，主要对请求失败的结果进行操作
见实例：

<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
//为该元素配置一个双击事件
$("button").dblclick(function(){
//使用ajax请求
$.ajax(
//请求地址
{url:"demo_ajax_load.txt",
//是否异步
async:true,
//对请求成功的结果进行操作,将请求成功之后的结果显示到h2元素标签中
success:function(result){
$("h2").html(result);
}});
});
});
</script>
</head>
<body>
<h2>这里将会显示出响应的数据结果result</h2>
<button type="button">点击启动Ajax方法</button>
	<p><a href="demo_ajax_load.txt">点击这里出现服务器文件</a></p>
</body>
</html>

以上就是一个简单的实例，需要注意的是，由于需要服务器文件，所以建议大家在菜鸟教程上去实现这个代码，可以清楚的实践一遍

接下来主要来介绍一下，在ajax是如何处理错误信息的

<!DOCTYPE  html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$("button").dblclick(function(){
$.ajax(
{url:"demo_ajax.txt",
async:true,
error:function(xhr){
$("h2").html(xhr.status+xhr.statusText)
}});
});
});
</script>
</head>
<body>
<h2>这里将会显示出响应的数据结果result</h2>
<button type="button">点击启动Ajax方法</button>
	<p><a href="demo_ajax_load.txt">点击这里出现服务器文件</a></p>
</body>
</html>

执行这段代码的结果会在h2处显示出