jquery---ajax方法示例

ajax方法

javascript 复制代码
$.ajax({name:value, name:value, ... })

ajax方法有一个参数,一定长度的对象,内部指定了ajax的请求地址和格式,方式等等,它可以有以下的属性和值

示例

这里展示了一个简单的get请求图片url的实例

javascript 复制代码
let data;
let url = "https://picsum.photos/v2/list";

$(document).ready(function(){
    $("#bt").click(function(){
        $.ajax({
            type: "get",//可选,请求方式,默认为get
            url: url,//必选,请求的url
            data: {// 可选,设置参数
                page:2,
                limit :10
            },
            dataType: "",// 可选,请求结果的数据类型,比如:application/json
            success: function (response) {// 请求成功的操作
                console.log(response);
                data = response;
                for(item of data){// 把图片渲染到页面
                    console.log(item.download_url);
                    let img = $("<img>").attr('src',item.download_url).attr("width",200);
                    $("body").append(img);
                }
            },
            error:function(){// 请求失败的操作
                console.log("请求失败")
            }
        });
    })
});
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <button id="bt">click</button>
</body>
<script src="ajax.js"></script>
</html>

结果展示

相关推荐
小羊没烦恼!14 小时前
Ajax与JSON的一些总结
android·java·前端·数据库·mysql·算法·okhttp
脉动数据行情2 天前
Java OkHttp 对接国际期货批量行情 SpringBoot 定时落库实践
java·spring boot·okhttp
变与不变8062 天前
jQuery 核心语法与 jQuery AJAX
前端·ajax·jquery
ycydynq3 天前
django用Bootstrap 模态框 在同一页面实现增删改查
django·bootstrap·jquery
牧瀬クリスだ7 天前
Ajax入门:从原生XHR到axios实战
java·spring boot·ajax·okhttp
传人once10 天前
选择文件按钮样式如何美化
前端·html·css3·jquery·html5
墨天梦11 天前
B15_HTTP解析与OkHttp拦截器
网络协议·http·okhttp
传人once13 天前
网页文字滚动效果如何做
前端·css·html·jquery·html5
传人once13 天前
多图片上传预览功能如何写
前端·css·html·jquery·html5
传人16 天前
网页文字滚动效果如何做
前端·javascript·jquery