ajax的练习

最新推荐文章于 2023-12-16 10:55:58 发布

qq_41386300

最新推荐文章于 2023-12-16 10:55:58 发布

阅读量639

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_41386300/article/details/90680407

前端专栏收录该内容

2 篇文章

订阅专栏

博客主要介绍了Ajax的使用，采用jQuery写法。强调Ajax不能跨域请求，并解释跨域概念，给出三种解决跨域的方法，如JSONP、CORS等。还展示了未解决跨域问题的例子及解决后的效果，提及Ajax简写形式的使用条件，最后介绍用Ajax实现下一页、滚动加载等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于ajax的资料有很多就不说明了，直接上使用代码

1. 请求

这里使用jquery的写法

基本写法如下：

$.ajax({
        url:'地址',
        type:'get/post',
        data:{},
        dataType:'json/jsonp',
        success:function (res) {
        }
    })

注意：

ajax不能跨域请求
跨域请求就是两个地址的协议，主域名，端口号完全相同，只要有一个不相同，这两个网址就是跨域
比如 https://www.baidu.com和https?/www.mi.com这两个网址的协议一样都是https，端口一样都是80，但是他们的主域名不一样，所以他们之间旧构成了跨域问题

解决跨域（3种方法）：

jsonp
dataType设为jsonp，需要后台支持jsonp形式
cors 需要后台配合
后台配置允许所有或指定网址能直接访问

使用举例：

下面是没有解决跨域问题的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax练习</title>
</head>
<body>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>
    $.ajax({
        url:'https://a.huodong.mi.com/flashsale/getslideshow',
        type:'get',
        success:function (res) {
            console.log(res)

        }
    })
</script>

</html>

首先看一下数据本身的样子
在这里插入图片描述
打开方式：

按上图的方式找到右边的URL打开即可

再看我们再html代码中用ajax是否能请求到的数据
在这里插入图片描述
我们看到报错了，这是因为跨域了，我们再加上dataType看一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax练习</title>
</head>
<body>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>
    $.ajax({
        url:'https://a.huodong.mi.com/flashsale/getslideshow',
        type:'get',
        dataType:'jsonp',
        success:function (res) {
            console.log(res)

        }
    })
</script>

</html>

在这里插入图片描述
成功获取到了数据

ajax的间写形式

$.get(url,data,function (res) {
        
    })
$.post(url,data,function (res) {
        
    })

需要注意的是间写形式必须要用在没有跨域的情况下，因为它没有dataType这个参数

上面得到的数据也可以处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax练习</title>
</head>
<body>
    <ul id="list">

    </ul>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>
    $.ajax({
        url:'https://a.huodong.mi.com/flashsale/getslideshow',
        type:'get',
        dataType:'jsonp',
        success:function (res) {
            for(var i=0;i<res.data.list.list.length;i++){
                $("<li><img src="+res.data.list.list[i]['discount_img']+"/><p>"+res.data.list.list[i].goods_name+"</p></li>").appendTo('#list')
            }

        }
    })
</script>

</html>

在这里插入图片描述
用ajax实现下一页功能

插一个小知识点：定时器

setTimeout(function () {
     alert('定时2秒')
 },2000)

用ajax实现滚动加载更多
在这里插入图片描述

在上面的基础上，实现下拉加载几次后就不再加载，显示一个加载更多