ajax的练习

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

qq_41386300

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

阅读量588

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41386300/article/details/90680407

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于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实现滚动加载更多
在这里插入图片描述

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

qq_41386300

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax的练习

关于ajax的资料有很多就不说明了，直接上使用代码1. 请求这里使用jquery的写法基本写法如下：$.ajax({ url:'地址', type:'get/post', data:{}, dataType:'json/jsonp', success:function (res) { } ...
复制链接

扫一扫