jQuery -- 光阴似箭（五）：AJAX 方法

jQuery -- 知识点回顾篇（五）：AJAX 方法

1. $.ajax 方法：用于执行 AJAX（异步 HTTP）请求。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script><script type="text/javascript" >    $(function(){ //语法格式：$.ajax({name:value, name:value, ... })//该参数规定 AJAX 请求的一个或多个名称/值对。
            $("#btn_ajax").click(function(){$.ajax({url:"Test_ajax.aspx",success:function(result){$("#myDiv1").html(result);}});});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>
</body>
</html>

2. $.ajaxSetup() 方法：为将来的 AJAX 请求设置默认值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){ //语法格式：$.ajaxSetup({name:value, name:value, ... })//该参数为带有一个或多个名称/值对的 AJAX 请求规定设置。
            $("#btn_ajax").click(function(){$.ajaxSetup({url:"Test_ajax.aspx",success:function(result){$("#myDiv1").html(result);}});$.ajax();});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>
</body>
</html>

3. $.get() 方法：使用 HTTP GET 请求从服务器加载数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script><script type="text/javascript" >    $(function(){ //语法格式：$.get(URL,data,function(data,status,xhr),dataType)//URL: 必需参数。规定您需要请求的 URL。//data:    可选参数。规定连同请求发送到服务器的数据。//function(data,status,xhr)：可选参数。规定当请求成功时运行的函数。//dataType：可选参数。规定预期的服务器响应的数据类型。
            $("#btn_ajax").click(function(){$.get("Test_ajax.aspx",function(data){alert("数据: "   data );});});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>
</body>
</html>

4. $.getJSON() 方法：使用 AJAX 的 HTTP GET 请求获取 JSON 数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){$("#btn_ajax").click(function(){//语法格式： $(selector).getJSON(url,data,success(data,status,xhr))//url：必需参数。规定将请求发送到哪个 URL。//data：可选参数。规定发送到服务器的数据。//success(data,status,xhr)：可选参数。规定当请求成功时运行的函数。
                $.getJSON("Test_ajax.aspx",function(result){$("myDiv1").text(result);});});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>
</body>
</html>

5. $.getScript() 方法：使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){$("#btn_ajax").click(function(){//语法格式： $(selector).getScript(url,success(response,status))//url: 必需参数。规定将请求发送到哪个 URL。//success(response,status)： 可选参数。规定当请求成功时运行的函数。
                $.getScript("Test_ajax_script.js");});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div>
</body>
</html>

6. $.param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){personObj=new Object();personObj.name="xiaohuzi";personObj.age=26;personObj.web="xiaohuzi.test.com"; //语法格式：$.param(object,trad)//object: 必需参数。规定要序列化的数组或对象。//trad: 可选参数。布尔值，指定是否使用参数序列化的传统样式。
            $("#btn_ajax").click(function(){$("#myDiv1").text($.param(personObj));});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div>
</body>
</html>

7. $.post() 方法：使用 HTTP POST 请求从服务器加载数据。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){//语法格式：$(selector).post(URL,data,function(data,status,xhr),dataType)//URL: 必需参数。规定将请求发送到哪个 URL。//data: 可选参数。规定连同请求发送到服务器的数据。//function(data,status,xhr): 可选参数。规定当请求成功时运行的函数。//dataType: 可选参数。规定预期的服务器响应的数据类型。
            $("#btn_ajax").click(function(){$.post("Test_ajax.aspx",function(data){alert("Data: "   data );});});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div>
</body>
</html>

8. ajaxComplete() 方法：规定 AJAX 请求完成时运行的函数。

　ajaxStart() 方法：规定 AJAX 请求开始时运行的函数。

ajaxSend() 方法：规定 AJAX 请求即将发送时运行的函数。

ajaxError() 方法：规定 AJAX 请求失败时运行的函数。

ajaxStop() 方法：规定所有的 AJAX 请求完成时运行的函数。

ajaxSuccess() 方法：规定 AJAX 请求成功完成时运行的函数。

load() 方法：从服务器加载数据，并把返回的数据放置到指定的元素中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){//语法格式：$(document).ajaxSend(function(event,xhr,options))//function(event,xhr,options)     必需。规定当请求成功时运行的函数。
            $(document).ajaxSend(function(){$("#myDiv1").css("border","5px solid pink");});//语法格式：$(document).ajaxStart(function())//function(): 必需参数。规定当 AJAX 请求开始时运行的函数。
            $(document).ajaxStart(function(){$("#myDiv1").css("display","block");});//语法格式：$(document).ajaxStop(function())//function(): 必需参数。规定所有的 AJAX 请求完成时运行的函数。
            $(document).ajaxStop(function(){$("#myDiv1").css("border","3px solid green");});//语法格式：$(document).ajaxError(function(event,xhr,options,exc))//function(event,xhr,options,exc)：必需参数。规定当请求失败时运行的函数。
            $(document).ajaxError(function(){$("#myDiv1").css("border","3px solid red");});//语法格式：$(document).ajaxSuccess(function(event,xhr,options))//function(event,xhr,options): 必需参数。规定如果请求成功时运行的函数。
            $(document).ajaxSuccess(function(){$("#myDiv1").css("border","3px solid yellow");});//语法格式：$(document).ajaxComplete(function(event,xhr,options))//function(event,xhr,options)： 必需参数。规定当请求完成时运行的函数。
            $(document).ajaxComplete(function(){$("#myDiv1").css("display","none");});//语法格式：$(selector).load(url,data,function(response,status,xhr))//url：必需参数。规定您需要加载的 URL。//data：可选参数。规定连同请求发送到服务器的数据。//function(response,status,xhr)：可选参数。规定 load() 方法完成时运行的回调函数。
            $("#btn_ajax").click(function(){$("#txt").load("Test_ajax.aspx");});});</script>
</head>
<body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div>
</body>
</html>

9. serialize() 方法：通过序列化表单值创建 URL 编码文本字符串。

serializeArray() 方法：通过序列化表单值来创建对象（name 和 value）的数组。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" >    $(function(){//语法格式：$(selector).serialize()//您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。//序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
            $("#btn_serialize").click(function(){$("#myDiv1").text($("form").serialize());});//语法格式：$(selector).serializeArray()//serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。//您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
            $("#btn_serializeArray").click(function(){x=$("form").serializeArray();$.each(x, function(i, field){$("#myDiv2").append(field.name   ":"   field.value   "   ");});});});</script>
</head>
<body><form action="">姓名: <input type="text" name="Name" value="XiaoHuzi" /><br>年龄: <input type="text" name="Age" value="26" /><br>工作: <input type="text" name="Job" value="IT" /><br></form><button type="button" id="btn_serialize">serialize</button><button type="button" id="btn_serializeArray">serializeArray</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div> <div id="myDiv2" style="height:30px;padding: 10px;border:2px solid green;"></div>
</body>
</html>

更多专业前端知识，请上【猿2048】www.mk2048.com

jQuery -- 光阴似箭（五）：AJAX 方法相关推荐

用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
JQuery封装的ajax方法
JQuery封装的ajax方法 JQuery封装的ajax优势:简单方便,已做好浏览器兼容性处理. 1.$.post方法 $.post(url[,data][,callback][,type]) ...
ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用首先介绍下$.ajax的参数 type:请求方式 GET/ ...
jquery封装的ajax方法获取web服务器时间
解决方案: Ajax HTTP Head法原理: 一般服务器在发送静态页面的时候(apache, nginx, lighttpd就目前所知)都是会在 HTTP 头里带一个Date的头信息的,那么我用 ...
jquery中的ajax方法参数——$.ajax()方法详解
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法, ...
jquery中的ajax方法请求后台数据
首先要插入jQuery.js文件,我这里用的是2.2.4版本,也可以用最新的3.1版本案例提前和后台沟通好对应的网址接口,我这里是用node.js写的后台,同时因为保存在本地,所以协议名和域名省略 ...
jquery中的ajax方法(备忘)
参考:https://www.cnblogs.com/tylerdonet/p/3520862.html w3school:http://www.w3school.com.cn/jquery/ajax ...
深入了解jquery中的ajax方法参数
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
阿里jquery的ajax迁移fetch,你不需要jQuery(三)：新AJAX方法fetch()
XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...
在jquery中使用AJAX
在jquery中使用封装好的AJAX会对开发效率起到极大的便利,因此掌握jquery中的一系列AJAX封装函数是做好页面数据交互的必备技能: 1.在之前,我们首先需要详细了解AJAX异步请求接受的五中 ...

jQuery -- 光阴似箭（五）：AJAX 方法

jQuery -- 光阴似箭（五）：AJAX 方法相关推荐

最新文章

热门文章