Ajax

已于 2022-06-05 20:36:02 修改
阅读量137 收藏
点赞数
文章标签： javascript
于 2022-04-22 19:59:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49029709/article/details/124353683
版权

01-课程大纲介绍

1.1-Ajax是什么？

1.2-学习Ajax的目标是什么？

  • 学会使用ajax 根据 接口文档 和 服务器 交互
    • 目前，我们网页所有的数据都是写死的。实际开发中，网页的数据需要从服务器获取。而ajax技术就是来实现这一功能的。

1.3-如何学习Ajax

  • 1.服务器了解
    • a. 什么是服务器
    • b.服务器的交互流程
  • 2.ajax工作流程
  • 3.可以使用ajax向服务器请求数据
  • 4.ajax综合案例应用

02-服务器介绍

1.1-什么是服务器?

  • 1.服务器 就是提供某种服务的 电脑(机器)
  • 2.如何让电脑提供某种服务呢？安装软件
    • 想让你的电脑提供 听歌 服务，需要装什么软件呢？
      • 网易云、qq音乐
    • 想让你的电脑提供 视频 服务，需要装什么软件呢？
      • 爱奇艺，优酷
    • 想让你的电脑提供 聊天 服务，需要装什么软件呢？
      • qq，微信
  • 3.综上所述，服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种
    • 数据库服务
    • 文件服务
    • 多媒体服务(音视频)
    • 邮件服务
    • Web服务
  • 4.要想让你的电脑成为一台Web服务器，我们只需要安装对应的软件即可。
    • 由于这些软件涉及的专业知识属于后台开发领域，我们的重点是了解什么是服务器，并且我们是前端开发，所以我们主要学习如何使用前端中的软件来和服务器进行交互。那么我们前端主要使用什么软件来和服务器进行交互呢？（Chrome）

1.2-服务器交互流程

  • 为什么刚刚我们只需要在浏览器输入一个网址点击回车之后就可以看到网页呢？
  • 为什么我们修改了网页之后，需要在浏览器刷新以下才能看到最新的内容呢？
  • 为什么在浏览器输入 http://www.baidu.com就可以看到百度网页呢？
  • 为什么在浏览器输入 http://www.jd.com就可以看到京东网页呢？
  • 其实，浏览器和服务器之间的每一次交互，都是由三个部分组成
    • 请求(浏览器发起请求，服务器接收)
    • 处理（服务器处理这个请求）
    • 响应（服务器响应数据给浏览器）

1.3-浏览器访问服务器的几种方式（代码01）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
    </style>
</head>

<a href="http://192.168.137.1">点我跳转</a>
<button id="btn">点我也可以跳转哟</button>

<body>
    <script>
        /*几种访问服务器的方式
        1.直接在浏览器地址栏输入网址
        2.使用a标签的href属性
        3.使用window.location.href 
         */

        document.getElementById('btn').onclick = function(){
            window.location.href = 'http://192.168.137.1';
        };
    </script>
</body>
</html>

03-ajax工作流程

1.1-什么是ajax？

1.2-为什么需要ajax？

  • 1.以前我的写的页面全部都是固定的假数据，其实网页的数据都是从服务器获取的，一旦服务器数据变化，网页上的内容也会发生变化
  • 2.虽然可以通过在浏览器地址栏直接输入网址（url）的方式向服务器获取数据，但是我们的网页会刷新
  • 3.学会ajax：就可以做到在不刷新网页的情况下向服务器请求数据，让网站数据内容动态变化。

1.3-ajax的工作流程(代码02)

  • 1.创建XMLHttpRequest对象（俗称小黄人）
    • let xhr = new XMLHttpRequest();
  • 2.设置请求
    • xhr.open('get', 'https://autumnfish.cn/api/joke');
  • 3.发送请求
    • xhr.send();
  • 4.注册回调函数
      • 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）
      • xhr.onload = function () {console.log(xhr.responseText);}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otFxml7w-1650628418564)(day01.assets/1563473756443.png)]

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./jquery-1.12.4.min.js"></script>
</head>

<body>
    <script>
      
        /* 1.ajax： 在页面不刷新的情况下向服务器请求数据
           2.XMLHttpRequest ： http请求对象，负责实现ajax技术（小黄人）
                （1）创建XMLHttpRequest对象
                        * 小黄人，相当于黄袍加身的跑腿外卖小哥哥
                （2）设置请求
                        * 告诉小黄人服务器地址
                （3）发送请求
                        * 小黄人出发去指定地址取外卖（数据）
                            * 2G网速：走路去的
                            * 3G网速：骑膜拜去的
                            * WIFI : 骑电动车去的
                            * 4G   ： 骑小牛牌电动车去的
                （4）注册回调函数
                        * 小黄人把取回的外卖送到你家门口
        
         */

        //1.创建小黄人对象XMLHTTPRequest
        let xhr = new XMLHttpRequest();
        //2.设置请求
        xhr.open('get', 'https://autumnfish.cn/api/joke');
        //3.发送请求
        xhr.send();
        //4.注册回调函数
        /* 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢） */
        xhr.onload = function () {
            console.log(xhr.responseText);
            document.body.innerText = xhr.responseText;
        };
    </script>
</body>

</html>

名词解释（课后了解）

  • Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
  • 说人话：ajax就是一套可以让网站跟服务器交互的一种技术，能在我们需要时，不用再刷新网页就能去服务器要一些数据回来
  • 例：http://www.smzdm.com 里只要网站往下滚动，就能不用刷新页面跟服务器要数据

1.4-案例：看笑话

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        text-align: center;
      }

      input {
        border: 4px solid gray;
        padding: 10px;
        font-size: 25px;
        background-color: skyblue;
        color: white;
        border-radius: 10px;
        cursor: pointer;
        outline: none;
      }

      .joke-container {
        width: 500px;
        height: 500px;
        border: 1px solid gray;
        border-radius: 10px;
        padding-left: 10px;
        margin: 10px auto;
        font-size: 30px;
        text-align: left;
        text-indent: 60px;
      }
    </style>
  </head>

  <body>
    <input type="button" value="点我看笑话" class="getJoke" />
    <div class="joke-container"></div>

    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script>
      /*
          随机获取笑话的接口
      
          - 请求地址：https://autumnfish.cn/api/joke
          - 请求方法：get
          - 请求参数：无
          - 响应内容：随机笑话
      
          思路步骤
      
          1. 给按钮注册点击事件 onclick
          2. 通过ajax调用 笑话接口
          3. 数据返回之后 显示到div中
       */
      document.querySelector(".getJoke").onclick = function() {
        // 1.创建小黄人对象
        let xhr = new XMLHttpRequest()
        // 2.设置请求的方法和地址
        xhr.open("get", "https://autumnfish.cn/api/joke")
        // 3.发送请求
        xhr.send()
        // 4.注册回调函数
        xhr.onload = function() {
          // console.log(xhr.responseText)
          // 显示到div中
          document.querySelector('.joke-container').innerText = xhr.responseText
        }
      }
    </script>
  </body>
</html>

04-Ajax发送get请求与post请求

1.1-get请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      /*
        1.get传参格式： url?key=value
        2.示例： https://autumnfish.cn/api/joke/list?num=10
      */

      // 1.实例化ajax对象
      let xhr = new XMLHttpRequest()
      // 2.设置请求方法和地址
      // get请求的数据直接添加在url的后面 格式是 url?key=value
      xhr.open("get", "https://autumnfish.cn/api/joke/list?num=10")
      // 3.发送请求
      xhr.send()
      // 4.注册回调函数
      xhr.onload = function() {
        console.log(xhr.responseText)
      }
    </script>
  </body>
</html>

1.2-post请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      /* 
        请求方法get和post区别： 传参方式不同
            get请求： 直接在url后面拼接参数
                * 参数在url中，安全性不高
            post请求：
                1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
                    * 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴
                2.使用xhr的send方法发送参数： xhr.send('参数名=参数值');
                    * 注意：不要加前面的? 
      */
     
      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      //(2).设置请求方法和地址
      xhr.open("post", "https://autumnfish.cn/api/user/register")
      //(3).设置请求头（post请求才需要设置）
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      //(4).发送请求 ： 参数格式  'key=value'
      xhr.send("username=admin")
      //(5).注册回调函数
      xhr.onload = function() {
        console.log(xhr.responseText)
      }
    </script>
  </body>
</html>

05-综合案例

在这里插入图片描述

1.1-用户登录

<!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>
    <link rel="stylesheet" href="./css/bootstrap-v4.6.0.css" />
    <link rel="stylesheet" href="./css/login.css" />
  </head>

  <body>
    <div class="login-box">
      <div class="form-group">
        <label for="username">用户名</label>
        <!-- 账号 -->
        <input
          type="text"
          class="form-control"
          id="username"
          autocomplete="off"
        />
        <small id="emailHelp" class="form-text text-muted"
          >默认用户名为:
          <strong>admin</strong>
        </small>
      </div>
      <div class="form-group">
        <!-- 密码 -->
        <label for="password">密码</label>
        <input type="text" class="form-control" id="password" />
        <small id="emailHelp" class="form-text text-muted"
          >默认密码为
          <strong>123456</strong>
        </small>
      </div>
      <button type="submit" class="btn btn-primary" id="btnLogin">登录</button>
    </div>

    <script>
      /* 思路分析:交互
		  1.点击登录按钮
			  1.1 获取用户输入的文本
			  1.2 ajax发送post请求
			  1.3 服务器响应数据
				code:200  成功，跳转首页
				code:500  失败，弹窗提示用户
		  */

      // 登录功能
      document.querySelector("#btnLogin").onclick = function() {
        //1.1 获取用户输入的文本
        let username = document.querySelector("#username").value
        let password = document.querySelector("#password").value
        //1.2 ajax发送post请求
        //(1).实例化ajax对象
        let xhr = new XMLHttpRequest()
        //(2).设置请求方法和地址
        xhr.open("post", "http://www.liulongbin.top:3009/api/login")
        //(3).设置请求头（post请求才需要设置）
        xhr.setRequestHeader(
          "Content-type",
          "application/x-www-form-urlencoded"
        )
        //(4).发送请求 ： 参数格式  'key=value'
        xhr.send(`username=${username}&password=${password}`)
        //(5).注册回调函数
        xhr.onload = function() {
          //1.3 服务器响应数据 （需要解析json->js）
          let res = JSON.parse(xhr.responseText)
          console.log(res)
          if (res.code == 500) {
            alert(res.msg)
          } else {
            alert("登录成功")
            location.href = "http://www.baidu.com"
          }
        }
      }
    </script>
  </body>
</html>

1.2-新闻列表

在这里插入图片描述

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 导入样式表 -->
  <link rel="stylesheet" href="./css/news.css" />
</head>

<body>

  <!-- 新闻列表 -->
  <div id="news-list">
    <!-- 新闻的 item 项 -->
    <div class="news-item">
      <img class="thumb" src="" alt="" />
      <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>胡润百富</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>2019-10-28 10:14:38</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：66</span>
        </div>
      </div>
    </div>
  </div>

 
  <script>
    /* 思路分析
    1.请求数据(页面一加载，立刻获取数据，不需要事件的触发)
    2.渲染结构
    */

    // 1.请求数据(页面一加载，立刻获取数据，不需要事件的触发)
    //(1).实例化ajax对象
    let xhr = new XMLHttpRequest()
    //(2).设置请求方法和地址
    //get请求的数据直接添加在url的后面 格式是 url?key=value
    xhr.open('get', 'http://www.liulongbin.top:3009/api/news')
    //(3).发送请求
    xhr.send()
    //(4).注册回调函数
    xhr.onload = function() {
      //4.1 服务器返回JSON -> JS对象
      let res = JSON.parse(xhr.responseText)
      console.log(res)
      //4.2  渲染页面
      renderData(res.data)
    }

    /* 将数据渲染到页面有两种方式
      第一种：DOM驱动。  
        方式: 遍历数组,创建元素添加到页面
        弊端: DOM操作比较繁琐
      第二种: 数据驱动。 
        方式: 将数组 隐射成 html字符串，直接替换元素innerHTML
        好处: 无需操作DOM,只需要操作数据即可
    */
    

    //第一种： DOM驱动。webapi阶段的方式,今后不再使用
    function renderDom(arr){
      for(let i = 0;i<arr.length;i++){
        //(1)创建元素
        let div = document.createElement('div')
        //(2)设置内容
        div.innerHTML = `<div class="news-item">
        <img class="thumb" src="http://www.liulongbin.top:3009${arr[i].img}" alt="" />
        <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">${arr[i].title}</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>${arr[i].source}</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>${arr[i].time}</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：${arr[i].cmtcount}</span>
        </div>
        </div>
        </div>`
        //(3)添加到页面
        document.querySelector('#news-list').appendChild(div)
      }
    }


    //第二种: 数据驱动。 今后学习和开发推荐方式
    const renderData = arr=>{
      document.querySelector('#news-list').innerHTML = arr.map(item=>{
        return `<div class="news-item">
        <img class="thumb" src="http://www.liulongbin.top:3009${item.img}" alt="" />
        <div class="right-box">
        <!-- 新闻标题 -->
        <h1 class="title">${item.title}</h1>
        <div class="footer">
          <div>
            <!-- 新闻来源 -->
            <span>${item.source}</span>&nbsp;&nbsp;
            <!-- 发布日期 -->
            <span>${item.time}</span>
          </div>
          <!-- 评论数量 -->
          <span>评论数：${item.cmtcount}</span>
        </div>
        </div>
        </div>`
      }).join('')
    }

  </script>
</body>

</html>

1.3-水果列表

在这里插入图片描述

<!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" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>水果列表</title>
  </head>

  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>水果列表</span>
      </div>
      <!-- table -->
      <div class="main">
        <div class="table">
          <!-- 头部 -->
          <div class="thead">
            <div class="tr">
              <div class="th">名字</div>
              <div class="th">图片</div>
              <div class="th">简介</div>
              <div class="th">操作</div>
            </div>
          </div>
          <div class="tbody">
            <div class="tr">
              <div class="td">火龙果</div>
              <div class="td">
                <img alt="" src="./img/火龙果.png" />
              </div>
              <div class="td">
                <span class="my-input__inner count">一种好吃的水果</span>
              </div>
              <div class="td">
                <button class="info">查看详情</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      /* 思路分析
      1.页面一加载,发送ajax请求
      2.服务器响应数据,渲染到页面
      */

      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      //(2).设置请求方法和地址
      //get请求的数据直接添加在url的后面 格式是 url?key=value
      xhr.open("get", "https://autumnfish.cn/fruitApi/fruits")
      //(3).发送请求
      xhr.send()
      //(4).注册回调函数
      xhr.onload = function() {
        // 4.1 将JSON ——> JS对象
        let res = JSON.parse(xhr.responseText)
        console.log(res)
        // 4.2 渲染页面
        renderData(res.data)
      }

      /* 将数据渲染到页面有两种方式
      第一种：DOM驱动。  
        方式: 遍历数组,创建元素添加到页面
        弊端: DOM操作比较繁琐
      第二种: 数据驱动。 
        方式: 遍历数组,拼接html字符串直接替换innerHTML
        好处: 无需操作DOM,只需要操作数据即可
      */
      const renderData = arr => {
        document.querySelector(".tbody").innerHTML = arr.map(item => {
          return `<div class="tr">
              <div class="td">${item.name}</div>
              <div class="td">
                <img alt="" src="${item.icon}" />
              </div>
              <div class="td">
                <span class="my-input__inner count">${item.info}</span>
              </div>
              <div class="td">
                <button class="info">查看详情</button>
              </div>
            </div>`
          }).join("")
      }
    </script>
  </body>
</html>

今日接口文档

1.1-什么是接口文档

  • 1.接口：Web服务器提供的，让ajax请求的网络地址称之为接口，简称API

  • 2.接口文档 ：为了方便开发人员使用，我们的后台小伙伴会提供一种专门的文档，称之为接口文档

    • 接口文档，又称为API文档，可以理解为接口的使用说明书
      • 接口文档的本质 ：其实就是后台开发（如php）他们写的函数注释。后台在处理请求的时候一般都会写一些函数

  • 3.一个标准的接口文档至少要包含以下三种信息（只能多，不能少）

    • a.请求的地址 （url）
    • b.请求的方法 （get或者post）
    • c.请求的参数

  • 4.以下是我们这个阶段可能会用到的接口文档，实际开发中为了避免你的url地址，方法,参数写错，一般强烈建议直接复制粘贴

1.2-接口文档示例

1.随机获取笑话的接口

2.获取多条随机笑话

随机获取笑话的接口

  • 请求地址：https://autumnfish.cn/api/joke/list

  • 请求方法：get

  • 请求参数：num

    • 示例：https://autumnfish.cn/api/joke/list?num=10
    参数名参数说明备注
    num笑话条数类型为数字,不要给错了

  • 响应内容：JSON

3.用户注册

注册用户

  • 请求地址：https://autumnfish.cn/api/user/register
  • 请求方法：post
  • 请求参数：username
参数名参数说明备注
username用户名不能为空,通过 send 方法传递，格式为 key=value
xhr.send('username=xxx')
  • 响应内容：注册成功或失败

4.用户登录

  • 请求地址：http://www.liulongbin.top:3009/api/login
  • 请求方法：post
  • 请求参数：username password
参数名参数说明备注
username用户名不能为空,默认为admin
password密码不能为空,默认为123456
xhr.send('username=xxx&password=xxx')
  • 响应内容：登录成功{code:200} 登录失败{code:500}

5.新闻列表

  • 请求地址：http://www.liulongbin.top:3009/api/news

  • 请求方法：get

  • 请求参数：

  • 响应内容：json数据

6.水果列表

  • 请求地址：https://autumnfish.cn/fruitApi/fruits
  • 请求方法：get
  • 请求参数：
参数名参数说明备注
username用户名不能为空,通过 send 方法传递，格式为 key=value
xhr.send('username=xxx')
  • 响应内容：注册成功或失败

4.用户登录

  • 请求地址：http://www.liulongbin.top:3009/api/login
  • 请求方法：post
  • 请求参数：username password
参数名参数说明备注
username用户名不能为空,默认为admin
password密码不能为空,默认为123456
xhr.send('username=xxx&password=xxx')
  • 响应内容：登录成功{code:200} 登录失败{code:500}

5.新闻列表

  • 请求地址：http://www.liulongbin.top:3009/api/news

  • 请求方法：get

  • 请求参数：

  • 响应内容：json数据

6.水果列表

  • 请求地址：https://autumnfish.cn/fruitApi/fruits

  • 请求方法：get

  • 请求参数：

  • 响应内容：json数据

前端-公瑾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
random-joke-generator:随机笑话发生器
05-24
随机笑话发生器 这是一个简单的随机笑话生成器Web应用程序。 个人想法 我是很久以前做的。 我仍然记得我是第一次学习有关Ajax，API的知识，而这个Web应用程序正是我以此知识构建的。 学分 我使用Chuck Norris的网站来实现随机笑话生成器API。 附加功能：用户可以输入所需的笑话数量（1至574）。
使用ajax,获取笑话。
体验新模板
02-22 272
<body> <button class="btnJoke" style="height: 50px;width: 100px;background-color: rgb(23, 189, 240);">点我有笑话</button> <div class="content_div" style="background-color: burlywood;height: 600px;width: 500px;color: crimson;font-siz
实例解读ajax发送请求与数据响应
flying meng的菜鸟居
08-24 954
Ajax 前后端数据交互——通过在后台与服务器的少量数据交换，实现页面异步（局部）更新。 异步 -> XMLHttpRequest 后台 <- （交换数据） -> 服务器 适应网址： var request; if(window.XMLHttpRequest){ request=new XMLHttpRequest(); //IE7+、Firefox、Chrome... }...
笑话plus三种ajax方法实现
u012271799的博客
04-20 143
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Docu
Ajax - 基础练习题 - 01
weixin_52088589的博客
04-29 678
1, 随机笑话 // 准备开关,控制请求,只有等这次加载完成之后才能发送下次请求 // 默认发送请求 let flag = true // 1, 找到按钮, 加点击事件 $('.getJoke').on('click', function () { if (flag) { // 代表现在要发请求了,把开关关掉 // 只允许我这一个请求存在 flag = false // 提示用户加载中
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
AJAXCALL
10-31
AJAXCALL
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
ajax官方api,yangguozhong
weixin_39901203的博客
08-05 470
AjaxApi下面列出的接口基本都是可以直接使用的，如有问题记得告诉我哦1. 支持的请求方法GET(SELECT)：从服务器取出资源(一项或多项)。POST(CREATE)：在服务器新建一个资源。PUT(UPDATE)：在服务器更新资源(客户端提供改变后的完整资源)。PATCH(UPDATE)：在服务器更新资源(客户端提供改变的属性)。DELETE(DELETE)：从服务器删除资源。HEAD：获取...
黑马AJAX
weixin_44736473的博客
12-24 223
黑马ajax个人纪录
axios
weixin_44796239的博客
06-09 582
Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。 简单记: Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, 维护用户体验性, 进行网页的局部刷新.浏览器访问服务器的方式ajax.jsp AjaxServlet 2 axios VUE中结合网络数据进行应用的开发使用步骤
axios结合Promise及Vue整合小demo
我是段段的博客
02-18 604
文章目录一、随机获取笑话二、查询天气 在浏览的时候看到两个有意思的小demo，自己动手写了写，具体如下 一、随机获取笑话 随机获取笑话的接口 请求地址：https://autumnfish.cn/api/joke 请求方式：get 请求参数：无参数 相应内容：一条随机笑话 DOM结构比较简单了 <div id="app"> <div class="title font-coloe">{{ title }}</div> <div class="
分享几个免费开源api
weixin_44326167的博客
05-25 1134
用于测试开发的免费开源api
每日搞笑段子API接口，免费好用
畅联聚合支付的博客
11-17 919
每日搞笑段子API接口，免费好用
随机生成笑话大全
我是谁的博客
05-09 4930
介绍 本来想实现freeCodeCamp的Build a Wikipedia Viewer效果，翻墙的挂了，穷孩子没资格搞开发，做了一个类似的笑话大全，调用阿凡达数据接口 效果图 点击random按钮随机获取一条笑话信息，输入框输入关键字，点击搜索按钮获取相应笑话内容 点击random 点击搜索 样式有点丑，莫嫌弃 数据接口 官网地址： https://www.avatardata.cn/D...
5、每日搞笑段子API接口，免费好用
roll圈圈的博客
02-07 3132
1、前言 每日搞笑段子接口，这个是RollToolsApi通用系列接口的其中一个，内部包含了2个小接口，能实现获取随机段子信息。这个接口的主要特点是，数据来源于我维护的另一款APP《段子乐》，段子乐中包含纯文本，图片和视频数据，出于成本考虑，目前仅开放纯文本的数据出来，后续等我找到一份更高薪的工作之后再考虑共享图片和视频段子数据。 RollToolsApi通用系列接口包含多很多免费通用的API接口，利用这些接口可以帮你实现去开发出很多功能丰富，服务稳定的小程序，APP或者网页，无论是练手还是实战都是不错的选
接口如何使用（以笑话大全api为例）
weixin_33714884的博客
07-18 1792
接口如何使用（以笑话大全api为例） 一、总结 一句话总结：直接用ajax，或者post，get方式向接口网址请求数据，然后接收网站传过来的数据就好，和我们写网站的时候前台向后台请求数据的方式一样。 所以，比如想获取用户的地理位置，直接可以请求获取地理位置的接口网址。     二、接口如何使用（以笑话大全api为例） 接口地址：http://api.jisuapi.com/xiaohu...
ajax笔记ajax笔记ajax笔记
最新发布
04-03
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值