首页 前端知识 AJAX(JQuery版本)

AJAX(JQuery版本)

2024-05-25 09:05:27 前端知识 前端哥 657 182 我要收藏

目录

前言

一.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页面,并发送一些参数

前言

之前我们在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"});

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9422.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!