AJAX(JQuery版本)

是洋洋a

已于 2024-05-21 14:13:12 修改

阅读量850

点赞数 24

分类专栏： JavaScript 文章标签： ajax jquery 前端

于 2024-05-20 17:54:41 首次发布

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/139064837

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

前言

之前我们在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”中的内容：

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

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

<!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选择器，只选出符合条件的标签

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

效果：

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

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

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

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

<!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函数，等价于：

$.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函数，等价于：

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

3.3一些例子

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

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

是洋洋a

关注

24
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX(JQuery版本)

方法是简单且强大的AJAX方法load()方法从服务器加载数据，并把返回的数据放入被选元素中语法参数说明URL：文件所在的路径data：与请求一同发送的查询字符串键/值对集合callback：load()方法完成后执行的函数名称$.get()方法通过远程HTTP GET请求载入信息这是一个简单的GET请求功能，用来取代复杂的$.ajax语法,dataType)参数说明参数描述url必需。规定将请求发送的哪个 URL。data可选。规定连同请求发送到服务器的数据。可选。
复制链接

扫一扫