AJAX(JQuery版本)

前言

之前我们在AJAX(JavaScript版本)-CSDN博客中已经阐述了如何使用"js操作AJAX "，在本篇我们阐述如何使用"JQ操作AJAX "，JQ操作AJAX比JS操作AJAX更加方便

一.load方法

1.1load()简介

JQuery load() 方法是简单且强大的AJAX方法

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

语法：

$(selector).load(URL,data,callback);

参数说明：

URL：文件所在的路径
data：与请求一同发送的查询字符串键/值对集合
callback：load()方法完成后执行的函数名称

1.2load()方法示例

下面是示例文件"demo_test.txt"中的内容：

html 复制代码

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

下面这个例子会将上述"demo_test.txt "中的内容加载到指定的**<div>**元素中:

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div id="demo"></div>
    <script>
        $("#demo").load("/static/demo_test.txt");
    </script>
</body>
</html>

效果图：

我们也可以对"demo_test.txt "文件添加CSS选择器 ，只选出符合条件的标签

Go 复制代码

$("#demo").load("/static/demo_test.txt #p1");

效果：

1.3load()方法回调函数的参数

load() 方法的callback参数 规定load() 方法完成后执行的回调函数 ，回调函数可以有三个参数：

responsTxt：包含调用成功时的结果内容
statusTxt：包含调用的状态
xhr：包含XMLHttprequest对象

例如下面这个例子，点击按钮后弹窗提示信息：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div id="demo"><h2>使用 jQuery AJAX 来改变文本</h2></div>
    <button>获得外部内容</button>
    <script>
        $("button").click(function(){
            $("#demo").load("/static/demo_test.txt",function(responseTxt,statusTxt,xhr){
                if(statusTxt == "success"){
                    alert("成功");
                }
                if(statusTxt == "error"){
                    alert("错误");
                }
                console.log("responseTxt是:",responseTxt);
                console.log("statusTxt是:",statusTxt);
                console.log("xhr是:",xhr);
            }); 
        });
    </script>
</body>
</html>

效果：

"responseTxt "、"statusTxt "、"xhr"分别为：

二.$.get()方法

2.1$.get()方法介绍

$.get() 方法通过远程HTTP GET请求载入信息

这是一个简单的GET请求 功能，用来取代复杂的 "$.ajax"

语法：

$(selector).get(url,data,success(response,status,xhr),dataType)

参数说明：

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。 * response：请求的结果数据 * status：请求的状态 * xhr：XMLHttpRequest对象
dataType	可选。规定预计的服务器响应的数据类型。默认JQ将智能判断，可能的类型： * xml * html * text * script * script * json * jsonp

2.2详细说明

该函数是简写的ajax函数，等价于：

javascript 复制代码

$.ajax({
    url:url,
    data:data,
    success:success,
    dataType:dataType    
});

2.3一些例子

2.3.1请求test.php网页并传送两个参数

$.get("test.php",{name:"Bill",time:"2px"});

2.3.2显示test返回值

$.get("test.php",function(data){

alert("返回值是:",data);

});

三.$.post()方法

3.1$.post()方法介绍

$.post() 方法通过HTTP POST 请求从服务器上请求数据

语法：

$.post(url,data,success(data,textStatus,jqXHR),dataType);

参数说明：

参数	描述
url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data,textStatus,jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）

3.2详细说明

该函数是简写的ajax函数，等价于：

javascript 复制代码

$.ajax({
    type:"POST",
    url:url,
    data:data,
    success:success,
    dataType:dataType
});

3.3一些例子

3.3.1请求test.php页面，并发送一些参数

javascript 复制代码

$.post("test.php",{name:"Bill",time:"2pm"});

AJAX(JQuery版本)

目录

前言

一.load方法

1.1load()简介

1.2load()方法示例

1.3load()方法回调函数的参数

二.$.get()方法

2.1$.get()方法介绍

2.2详细说明

2.3一些例子

2.3.1请求test.php网页并传送两个参数

2.3.2显示test返回值

三.$.post()方法

3.1$.post()方法介绍

3.2详细说明

3.3一些例子

3.3.1请求test.php页面，并发送一些参数