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>

结果展示

相关推荐
wno7046 天前
node.js中使用jquery
前端·node.js·jquery
程序员大阳7 天前
副队长JavaScript教程(67)-Ajax初识:背景、历史与核心概念
javascript·ajax·同步·异步·概念·背景·来是
程序员大阳7 天前
副队长JavaScript教程(70)-Ajax同源策略与跨域
javascript·ajax·同源策略·跨越·corp
星_离14 天前
《Ajax - 实战基础篇》
前端·ajax
李纲明14 天前
WordPress 结账页一直转圈不跳支付:AJAX、缓存排除、支付回调和 REST 怎么逐层核
运维·ajax·缓存·wordpress·woocommerce·devdiy·结账
鶴哥只手遮天15 天前
jQuery 4.0 源码架构与工程实践-第 01 章 · 全景与工程结构:一个 20 岁库的自省
前端·javascript·jquery
鶴哥只手遮天16 天前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
变与不变80617 天前
jQuery细节以及使用应用场景
前端·javascript·jquery
爱吃火鸡面呀19 天前
Spark RDD 行动算子(Action)详解
windows·ajax·spark
MandalaO_O19 天前
SpringMVC 响应返回值类型笔记
okhttp