【前端】Ajax

最新推荐文章于 2024-07-23 14:51:29 发布

钥钥睡着了

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量563

点赞数

分类专栏：前端黑马学习笔记文章标签：前端 ajax

本文链接：https://blog.csdn.net/qq_45764950/article/details/127885617

版权

前端黑马学习笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、服务器对外提供了哪些资源

如果要在网页上请求服务器上的数据资源，则需要用到XMLHttpRequest对象。

XMLHttpRequest(简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源。

最简单的用法 var xhrObj=new XMLHttpRequest()

二、了解Ajax

2.1什么是Ajax

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax

2.2Ajax作用

Ajax能让我们轻松实现网页与服务器之间的数据交互

三、jQuery中的Ajax

jQuery中发起Ajax请求常用的三个方法：

$.get()

$.post()

$.ajax()

3.1$.get()函数的语法

专门用于发起get请求，从而将服务器上的资源请求到客户端来进行使用。

语法：

$.get(url,[data],[callback])

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button id="btnGET">发起带参数的GET请求</button>
    <script>
        $(function () {
            $('#btnGET').on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
                    console.log(res);
                })
            })
        })
    </script>
</body>

</html>

3.2$.post()函数的语法

专门用来发起post请求，从而向服务器提交数据。

语法：

$.post(url,[data],[callback])

3.3$.ajax()函数的语法

功能比较综合的函数，他运行我们对Ajax请求进行更详细的配置。

            $.ajax({
                type:'',    //请求的方式  如GET或POST
                url:'',     //请求的URL地址
                data:{},    //这次请求要携带的数据
                success:function(res){} //请求成功之后的回调函数
            })