JQuery Ajax方法

一、JQuery Ajax简介：

Ajax是与服务器交换数据的技术，实现异步更新。

二、JQuery Ajax load()方法：

JQuery load()方法从服务器加载元素，并将返回的数据放入到被选元素中。

语法：$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

1、URL案例

（1）以下是用JQ-Ajax技术来更新一个div区域的内容：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 7         <script>
 8             $(function() {
 9                 $("button").click(function() {
10                     $("#div1").load("1.txt");
11                 });
12             });
13         </script>
14     </head>
15     <body>
16         <div class="div1" id="div1">注意目录和修改相同的字符编码</div>
17         <button>Ajax-获取txt文件</button>
18     </body>
19 </html>

运行结果如下所示：

点击按钮后：（改变的文字首先要存放在一个txt文件中）

（2）txt文件中还可以放置标签，html中部分代码如下：

1 <script>
2             $(function() {
3                 $("button").click(function() {
4                     $("#div1").load("1.txt #p1");         /*url参数中可以写JQ选择器，表示下载1.txt文件内容中的id为p1的内容*/
5                 });
6             });
7 </script>

2、callback案例：

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

（1）callback返回成功案例

 1 <script>
 2             $(function() {
 3                 $("button").click(function() {
 4                     $("#div1").load("1.txt",function(responseTxt,statusTxt,xhr) {
 5                         if(statusTxt=="success")
 6                             alert("外部内容加载成功!");
 7                         if(statusTxt=="error")
 8                             alert("error:"+xhr.status+":"+xhr.statusTxt);
 9                     });
10                 });
11             });
12 </script>

结果：

（2）callback返回失败案例

 1 <script>
 2             $(function() {
 3                 $("button").click(function() {
 4                     $("#div1").load("2.png",function(responseTxt,statusTxt,xhr) {    /*没有2.png这个文件*/
 5                         if(statusTxt=="success")
 6                             alert("外部内容加载成功!");
 7                         if(statusTxt=="error")
 8                             alert("error:"+xhr.status+":"+xhr.statusTxt);
 9                     });
10                 });
11             });
12 </script>

结果：

三、JQuery get()和post()方法：

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法：$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

1、get案例：

1.html部分代码：

1 <script>
2             $(function() {
3                 $("button").click(function() {
4                     $.get("1.php",function(data,status) {
5                         alert("数据："+data+"\n状态"+status);
6                     })
7                 });
8             });
9 </script>

1.php代码：

<?php
echo '这个是php文件中的数据';
?>

结果：

2、post()方法该方法自己未试验成功，大家可以多给指导，以下是网站代码

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 7 </script>
 8 <script>
 9 $(document).ready(function(){
10     $("button").click(function(){
11         $.post("/try/ajax/demo_test_post.php",{
12             name:"菜鸟教程",
13             url:"http://www.runoob.com"
14         },
15         function(data,status){
16             alert("数据: \n" + data + "\n状态: " + status);
17         });
18     });
19 });
20 </script>
21 </head>
22 <body>
23 
24 <button>发送一个 HTTP POST 请求页面并获取返回内容</button>
25 
26 </body>
27 </html>

demo_test_post.php文件代码：

1 <?php
2 $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
3 $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
4 echo '网站名: ' . $name;
5 echo "\n";
6 echo 'URL 地址: ' .$url;
7 ?>

结果：

四、$.ajax()方法：执行异步ajax请求

语法：$.ajax({name:value, name:value, ... })

 1 <script type="text/javascript">
 2             $(function() {
 3                 $("button").click(function() {
 4                     $.ajax({
 5                         url:"1.txt",
 6                         success:function(result){
 7                         $("#div1").html(result);
 8                         }
 9                     });
10                     $.ajax();
11                 });
12             });
13 </script>

结果：

五、$.ajaxPrefilter() 方法：在每个请求发送之前且被$.ajax()处理之前，处理自定义Ajax选项或修改已经存在选项

六、$.ajaxSetup() 方法：为将来的ajax请求设置默认值

语法：$.ajaxSetup({name:value, name:value, ... })

 1 <script type="text/javascript">
 2             $(function() {
 3                 $("button").click(function() {
 4                     $.ajaxSetup({
 5                         url:"1.txt",
 6                         success:function(result){
 7                         $("div").html(result);
 8                         }
 9                     });
10                     $.ajax();
11                 });
12             });
13 </script>

结果：

七、$.ajaxTransport()方法：创建处理Ajax数据实际传送的对象

八、$.getJSON() 方法：使用http get请求从服务器加载JSON编码的数据

　　　　语法：$(selector).getJSON(url,data,success(data,status,xhr))

九、$.getScript()方法：使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
十、$.param()方法：创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
十一、$.post() 方法：使用 AJAX 的 HTTP POST 请求从服务器加载数据
十二、ajaxComplete() 方法：规定 AJAX 请求完成时运行的函数
十三、ajaxError() 方法：规定 AJAX 请求失败时运行的函数
十四、ajaxSend() 方法：规定 AJAX 请求发送之前运行的函数
十五、ajaxStart() 方法：规定第一个 AJAX 请求开始时运行的函数
十六、ajaxStop() 方法：规定所有的 AJAX 请求完成时运行的函数
十七、ajaxSuccess()方法：规定 AJAX 请求成功完成时运行的函数
十八、load()方法：从服务器加载数据，并把返回的数据放置到指定的元素中
十九、serialize()方法：编码表单元素集为字符串以便提交
二十、serializeArray() 方法：编码表单元素集为 names 和 values 的数组

猜你喜欢