ajax基础day1

已于 2023-06-15 12:34:55 修改
阅读量54 收藏
点赞数
分类专栏： ajax 文章标签： javascript 开发语言 ajax 前端
于 2023-06-15 12:21:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53547977/article/details/131224185
版权

ajax基础day1

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>Get请求</title>
  <script src="../../res/jquery.js"></script>
</head>

<body>
  <button id="btnGET">发起不带参数的GET请求</button><br><br>
  <button id="btnGETINFO">发起带参数的GET请求</button><br>

  <script>
    //不带参数的get请求
    $(function () {
      $('#btnGET').on('click', function () {
        $.get('http://www.liulongbin.top:3006/api/getbooks', (res) => {
          console.log(res)
        })
      })
    })

    //带参数的get请求
    $(function () {
      $('#btnGETINFO').on('click', function () {
        $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 2 }, (res) => {
          console.log(res)
        })
      })
    })
  </script>
</body>
</html>

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>Post</title>
  <script src="../../res/jquery.js"></script>
</head>

<body>
  <button id="btnPOST">发起POST请求</button>

  <script>
    $(function () {
      $('#btnPOST').on('click', function () {
        $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }, function (res) {
          console.log(res)
        })
      })
    })
  </script>
</body>
</html>

3. 使用$.ajax发送请求

<!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>使用ajax发起get</title>
  <script src="../../res/jquery.js"></script>
</head>

<body>
  <button id="btnGET">发起GET请求</button><br><br>
  <button id="btnPOST">发起POST请求</button>

  <script>
    $(function () {
      $('#btnGET').on('click', function () {
        $.ajax({
          type: 'GET',
          url: 'http://www.liulongbin.top:3006/api/getbooks',
          data: { id: 1 },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })

    $(function () {
      $('#btnPOST').on('click', function () {
        $.ajax({
          type: 'POST',
          url: 'http://www.liulongbin.top:3006/api/addbook',
          data: {
            bookname: '史记',
            author: '司马迁',
            publisher: '上海图书出版社'
          },
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>

</html>

4.监听form表单提交事件

在表单里，当点击提交按钮的时候，触发表单提交事件，我们可以监听到此事件

<!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>表单</title>
  <script src="../../res/jquery.js"></script>
</head>

<body>

  <!-- target="_blank" : 在新页面打开 -->
  <form action="要跳转的界面" target="_blank" method="post">
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <button type="submit">提交并打开新页面</button>
  </form>


  <form action="要跳转的界面" id="f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交并重定向本页面</button>
  </form>

  <script>
    $(function () {
      // 第一种方式
      // $('#f1').submit(function () {
      //   alert('1.监听到了表单的提交事件')
      // })
  
      // 第二种方式
      $('#f1').on('submit', (e) => {
        alert('2.监听到了表单的提交事件')
        //阻止表单的默认提交，不发生跳转
        e.preventDefault()
      })
    })
  </script>
</body>
</html>

5.批量快速获取表单的值

给input输入框指定唯一的name，当点击提交的时候，会生成一个表单提交内容的拼接字符串 ，形如 name1=xx&name2=xx …

<!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>获取表单的值</title>
  <script src="../../res/jquery.js"></script>
</head>
<body>

  <form action="#" id="f1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>

  <script>
    $(function () {
      // 第一种写法
      /* $('#f1').submit(function (e) {
        e.preventDefault()
        var data = $(this).serialize()
        console.log(data)  //结果为: user_name=12&password=34
      }) */

      // 第二种写法
      $('#f1').on('submit', function (e) {
        e.preventDefault()
        var data = $('#f1').serialize()
        console.log(data)  //结果为: user_name=12&password=34
      })
    })
  </script>
</body>
</html>

6.使用传统方式渲染UI结构

<!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="../../res/jquery.js"></script>
</head>

<body>
  <div id="title"></div>
  <div>姓名：<span id="name"></span></div>
  <div>年龄：<span id="age"></span></div>
  <div>会员：<span id="isVIP"></span></div>
  <div>注册时间：<span id="regTime"></span></div>
  <div>爱好：
    <ul id="hobby">
      <li>爱好1</li>
      <li>爱好2</li>
    </ul>
  </div>

  <script>
    var data = {
      title: '<h3>用户信息</h3>',
      name: '张三',
      age: 20,
      isVIP: true,
      regTime: new Date(),
      hobby: ['吃饭', '睡觉', '打豆豆']
    }


    $(function () {
      $('#name').html(data.name)
      $('#title').html(data.title)
      $('#age').html(data.age)
      $('#isVIP').html(data.isVIP)
      $('#regTime').html(data.regTime)

      //渲染爱好的样式
      var rows = []
      $.each(data.hobby, function (i, item) {
        rows.push('<li>' + item + '</li>')
      })
      $('#hobby').html(rows.join(''))
    })
  </script>
</body>

</html>

渲染结果如下:
运行结果

7.演示模板引擎的使用

<!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>
  <!-- 1. 导入模板引擎 -->
  <!-- 在 window 全局，多一个函数，叫做 template('模板的Id', 需要渲染的数据对象) -->
  <script src="../../res/template-web.js"></script>
  <script src="../../res/jquery.js"></script>
</head>

<body>
  <div id="container"></div>

  <!-- 3. 定义模板 -->
  <!-- 3.1 模板的 HTML 结构，必须定义到 script 中 -->
  <script type="text/html" id="tpl-user">
    <h1>{{name}}    ------    {{age}}</h1>
    {{@ test}}

    <div>
      {{if flag === 0}}
      flag的值是0
      {{else if flag === 1}}
      flag的值是1
      {{/if}}
    </div>

    <ul>
      {{each hobby}}
      <li>索引是:{{$index}}，循环项是:{{$value}}</li>
      {{/each}}
    </ul>

    <h3>{{regTime | dateFormat}}</h3>
  </script>

  <script>
    // 定义处理时间的过滤器
    template.defaults.imports.dateFormat = function (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
    }


    // 2. 定义需要渲染的数据
    var data = { name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() }

    // 4. 调用 template 函数
    var htmlStr = template('tpl-user', data)
    console.log(htmlStr)
    // 5. 渲染HTML结构
    $('#container').html(htmlStr)
  </script>
</body>

</html>

8.字符串的replace操作

<!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>
    var str = '<div>我是{{name}}</div>'
    var pattern = /{{([a-zA-Z]+)}}/

    //得到匹配对象
    var patternResult = pattern.exec(str)
    console.log(patternResult)
    //用后一个替换掉前一个
    str = str.replace(patternResult[0], patternResult[1])
    console.log(str)  
  </script>
</body>
</html>

结果如下:
在这里插入图片描述

9. 字符串的多次replace操作

<!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>
    var str = '<div>{{name}}今年{{ age }}岁了</div>'
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/

    // 第一次匹配
    var res1 = pattern.exec(str)
    str = str.replace(res1[0], res1[1])
    console.log(str)

    // 第二次匹配
    var res2 = pattern.exec(str)
    str = str.replace(res2[0], res2[1])
    console.log(str)

    // 第三次匹配
    var res3 = pattern.exec(str)
    console.log(res3)
  </script>
</body>
</html>

10. 10.使用while循环进行replace操作

<!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>
    var str = '<div>{{name}}今年{{ age }}岁了</div>'
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/

    var patternResult = null
    //只要匹配结果不为 null 就会一直循环
    while (patternResult = pattern.exec(str)) {
      str = str.replace(patternResult[0], patternResult[1])
    }
    console.log(str)
  </script>
</body>

</html>

11.replace替换为真值

<!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>
    var data = { name: '张三', age: 20 }
   // console.log(data['name']);   //结果为 张三
    var str = '<div>{{name}}今年{{ age }}岁了</div>'
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/

    var patternResult = null
    while (patternResult = pattern.exec(str)) {
      str = str.replace(patternResult[0], data[patternResult[1]])
    }
    console.log(str)
  </script>
</body>

</html>

12.调用自己的模板引擎

<!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="../res/template.js"></script>
</head>

<body>

  <div id="user-box"></div>

  <!-- 定义模板 -->
  <script type="text/html" id="tpl-user">
    <div>姓名：{{name}}</div>
    <div>年龄：{{ age }}</div>
    <div>性别：{{  gender}}</div>
    <div>住址：{{address  }}</div>
  </script>

  <script>
    // 定义数据
    var data = { name: '张三', age: 18, gender: '男', address: '中国台湾台北' }

    // 调用模板引擎
    var htmlStr = template('tpl-user', data)

    // 渲染HTML结构
    document.getElementById('user-box').innerHTML = htmlStr
  </script>
</body>
</html>
雪落故里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
day01基础WEB
10-18
【标题】：“day01基础WEB” 在计算机科学领域，Web开发是构建和维护Web应用程序的过程，它使得用户可以通过互联网进行交互。"day01基础WEB"可能是一个学习系列的第一部分，专注于介绍Web开发的基本概念和技术。这...
day20_JQuery基础教案1
08-08
在本节"Day20_JQuery基础教案1"中，我们深入学习了jQuery的基本概念、快速入门以及jQuery对象与JavaScript对象的区别与转换。以下是详细的知识点解析： **jQuery概念** jQuery是一个JavaScript框架，旨在简化...
Ajax基础入门day01
qq_35206389的博客
11-25 129
1.什么是ajax Asynchronous JS And Xml 异步JS 和 XML 2.ajax 技术构成 以html 为骨架 以css 为渲染手段 以js 作为主要的操作语言 以XML 或者 JSON 作为数据传输格式 ...
day30 Ajax 1
m0_70619994的博客
08-15 232
一、服务器相关的基础概念 1、客户端 2、服务器 3、客户端与服务器通信的过程 4、资源与 URL 地址 二、Ajax 1、什么是 Ajax 2、使用 Ajax 请求数据的 5 种方式 3、axios 三、请求报文 & 响应报文 1、什么是请求报文和响应报文 2、请求报文的格式 3、响应报文的格式 4、http 响应状态码 四、接口相关的基础概念 1、接口的概念 2、接口文档的概念 3、接口测试工具-Postman......
T-Ajax基础-day03
奋斗的程序胖的博客
03-29 180
文章目录二.Ajax三.Ajax项目 二.Ajax restful的get请求 restful请求方法：get，delete，post，put 语法要求：get和delete一样，post和put一样 语义要求：人为的规定： ①get---->查询； ②delete—>删除； ③post---->新增； ④put---->修改 restful的get如果不带参数，写法和h...
AJAX day_01(6.2) AJAX基础、URL
m0_70328115的博客
06-06 114
1.AJAX概要；2.完整的web请求原理；3.同步与异步；4.客户端提交给服务器的两种方式；5.URL和后端接口回顾练习
Ajax 基础
weixin_45603651的博客
09-25 76
Ajax - day 01 A . ajax 的 作用 和 特点是什么 ? 作用 : 在前端网页发送的请求获取后台服务器的数据. 特点 : 异步请求(不会刷新页面), 局部刷新. B. Ajax 的应用场景 a. 页面上拉加载更多的数据 b. 列表数据无刷新分页 c. 表单项离开焦点数据验证 d. 搜索框提示文字下拉列表 C. Ajax到底有什么用? a. 可以让前端向后端发送请求 b . ...
Ajax基础入门(day4) - async 和 await
JOUKELOVE的博客
09-04 429
一、async 和 await 二、事件循环队列 - 宏任务微任务 三、案例 - 个人设置
AJAX学习笔记day1
qq_32073261的博客
12-04 160
AJAX全称为“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。并不是一门语言，而是综合应用的一门技术。
从Ajax零基础开始学习Day14
qq_46051366的博客
06-22 222
目录1、客户端与服务器1.1上网的目的1.2服务器1.3客户端2、URL地址2.1 URL地址的概念2.2 URL地址的组成部分3、分析网页的打开过程3.1分析网页的打开过程3.2基于浏览器的开发者工具分析通信过程4、服务器对外提供了哪些资源4.1数据也是资源4.2数据是网页的灵魂4.3网页中如何请求数据 4.4资源的请求方式5、了解Ajax 5.1什么是Ajax5.2为什么要学Ajax 5.3 Ajax的典型应用场景6、jQuery中的Ajax6.1了解jQuery中的Ajax6.2 $.get()函数的
Day 61 Ajax
Tao.的博客
09-07 287
ajax
AJAX基础
玲儿叮当想
03-24 157
    AJAX :  异步的 JavaScript And XML.   功能:  完成页面的局部刷新,不中断用户的体验. 传统的get/post异步校验方式:AJAX的编写的步骤: * 第一步：创建一个异步对象. * 第二步：设置对象状态改变触发一个函数. * 第三步：设置向后台提交的路径 * 第四步：发送请求.    * GET方式提交请求:ajax_get.jsfunction a...
day03-前端(ajax&json).zip
10-07
1. **XMLHttpRequest对象**：这是AJAX的基础，用于在后台发送HTTP请求并接收响应。它提供了open()、send()、onreadystatechange等方法以及status、responseText或responseXML等属性来处理请求和响应。 2. **异步...
day6_ajax01.zip
06-28
这个“day6_ajax01.zip”文件显然包含了关于Ajax的基础学习资源，可能是几个示例代码或教程，用于演示如何在Web开发中使用Ajax。让我们深入探讨Ajax的相关知识点。 1. **异步通信**：Ajax的核心是浏览器内置的...
Day1
03-12
"Day1"这个标题可能指的是学习或教学计划的第一天，通常会涵盖JavaScript的基础知识。在这个初步的阶段，我们通常会接触到以下几个关键知识点： 1. **JavaScript简介**：JavaScript是由Brendan Eich在1995年为...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 682
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1033
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 500
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 952
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
AJAX基础与实战应用
1. 工作原理： - AJAX的核心是XMLHttpRequest对象，它允许客户端（浏览器）在后台与服务器进行异步通信，而无需重新加载整个页面。 - 发起请求时，客户端创建一个XMLHttpRequest实例，设置请求方法、URL以及可能的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值