1 . Ajax Axios

已于 2022-01-18 20:16:52 修改
阅读量431 收藏
点赞数
文章标签： html 前端 javascript
于 2022-01-16 22:17:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wr_qianduan/article/details/122529713
版权

1. Form表单

1.1 概念:

就是用于采集用户输入的信息，

1.2 组成部分:

表单标签, 表单域, 表单按钮

1.3 提交方式:

通过submit 提交表单

1.4标签属性:

①  action: 向何处发送表单数据

② target:--------_blank新窗口打开;_self默认

③ method:以何种方式提交,类似type

④  enctype :发送表单数据之前对数据进行编码

1.5 GET  POST区别

① get 方式适合用来提交少量的，简单的数据

② post 方式适合用来提交大量的，复杂的，或包含文件上传的数据

2.通过Ajax提交表单数据

1.1 监听表单提交事件

 <script>
    $(function () {
      // 第一种方式
      // $('#f1').submit(function () {
      //   alert('监听到了表单的提交事件')
      // })

      // 第二种方式
      $('#f1').on('submit', function () {  
        alert('监听到了表单的提交事件2')
      })
    })
  </script>

1.2 阻止表单默认行为

event.preventDefault()

1.3 获取表单数据

serialize()

3.模板引擎

1.1 好处

  • 减少了字符串的拼接操作

  • 使代码结构更清晰

  • 使代码更易于阅读与维护

1.2  art-template模板引擎 使用步骤

-1  导入 art-template

  - 在window全局，就多了一个函数，叫做 template('模板id'，需要渲染的数据对象)

  <script src="./lib/template-web.js"></script>
  

- 2 定义数据

  var data = { name: 'zs', age: 20}
  

- 3  定义模板

  <script type="text/html" id="tpl-user">

      <h1>{{name}}    ------    {{age}}</h1>

  </script>
  

- 4  调用 `template` 函数

  - 函数的返回值就是拼接好的模板字符串

  var htmlStr = template('tpl-user', data)
 

- 4  渲染`HTML`结构

  $('#container').html(htmlStr)

1.3  使用xhr发起GET请求(求服务器上的数据资源)

①步骤:

  • 创建 xhr 对象

  • 调用 xhr.open() 函数

  • 调用 xhr.send() 函数

// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {//xhr 是实例对象
  if (xhr.readyState === 4 && xhr.status === 200) {//固定写法 
    //readyState 发送请求状态  status响应的状态
     // 获取服务器响应的数据
     console.log(xhr.responseText)//
   }
}

② readyState 属性，用来表示当前 Ajax 请求所处的状态

③使用xhr发起带参数的GET请求

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
xhr.send()
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
     console.log(xhr.responseText)
  }
}

④使用xhr发起POST请求

步骤:

  • 创建 xhr 对象

  • 调用 xhr.open() 函数

  • 设置 Content-Type 属性（固定写法）

  • 调用 xhr.send() 函数，同时指定要发送的数据

  • 监听 xhr.onreadystatechange 事件

// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send 函数
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
// 5. 监听事件
xhr.onreadystatechange = function () {
  //readyState 请求所处的状态 
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}

1.4  数据交换格式

① 定义:

服务器端与客户端之间进行数据传输与交换的格式

xhl :可扩展标记语言

XML和HTML的区别

XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。

  • HTML  用来展示数据的

  • XML      用来存储数据的

4.JSON

①概念:

即“JavaScript 对象表示法” 就是对象和数组的用字符串表示

②对象结构

对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，

value 的数据类型可以是数字、字符串(双引号)、布尔值、null、数组、对象6种类型。

不存在的值用null 不能用undefined.没有方法

③序列化 反序列化

要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() ( 反序列号 ) 方法：

要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() (序列化) 方法：

5. 封装自己的Ajax函数

①步骤

  • method 请求的类型

  • url 请求的 URL 地址

  • data 请求携带的数据

  • success 请求成功之后的回调函数

6. axios

 1.概念:

相比于原生的 XMLHttpRequest 对象，axios 简单易用。专注于网络数据请求的库

2.语法

<1> axios发起GET请求

语法:

axios.get('url', { params: { /*参数*/ } }).then(callback)


示列:
// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {///params查询
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
})

<2>  axios发起POST请求

语法:

axios.post('url', { /*参数*/ }).then(callback)


// 请求的 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
})

<3> 直接使用axios发起请求

语法:

axios({
 method: '请求类型',
 url: '请求的URL地址',
 data: { /* POST数据 */ },
 params: { /* GET参数 */ }
}).then(callback)



① get请求

document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
})


②post请求

document.querySelector('#btn4').addEventListener('click', function () {
  axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: {
      name: '娃哈哈',
      age: 18,
      gender: '女'
    }
  }).then(function (res) {
    console.log(res.data)
  })
})

目录

1. Form表单

1.1 概念:

1.2 组成部分:

1.3 提交方式:

1.4标签属性:

1.5 GET  POST区别

2.通过Ajax提交表单数据

1.1 监听表单提交事件

1.2 阻止表单默认行为

1.3 获取表单数据

3.模板引擎

1.1 好处

1.2  art-template模板引擎 使用步骤

1.3  使用xhr发起GET请求(求服务器上的数据资源)

①步骤:

② readyState 属性，用来表示当前 Ajax 请求所处的状态

③使用xhr发起带参数的GET请求

④使用xhr发起POST请求

1.4  数据交换格式

① 定义:

XML和HTML的区别

4.JSON

①概念:

②对象结构

③序列化 反序列化

5. 封装自己的Ajax函数

①步骤

6. axios

 1.概念:

2.语法

<1> axios发起GET请求

<2>  axios发起POST请求

<3> 直接使用axios发起请求

小野口苗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
axios的get请求传入数组参数
bieyezhongcai的博客
08-22 195
但是，如果 params 里有数组参数的话，上面的方法就会带来问题。这时候，后端 Django 用获取到的参数 b 一直是[]
JavaScript之Ajax-axios表单提交
AK Zzz的博客
11-17 5785
JavaScript的Ajax-axios表单提交,头像上传,图书管理,可能会有你想看的知识点......
axios 表单（formData）方式提交请求，以及文件上传方式
热门推荐
rudy_zhou的博客
01-27 5万+
axios 表单（formData）方式提交请求，以及文件上传方式一、使用表单格式请求二、上传文件总结 一、使用表单格式请求 更改请求头 headers 中 content-type 为 application/x-www-form-urlencoded axios 官方文档 application/x-www-form-urlencoded 格式请求 例子： import qs from 'qs'; const data = { 'bar': 123 }; const options = { me
axios模拟表单提交
最新发布
piglite的专栏
08-29 956
config里面设定发起post请求时的额外设置，header是设置（config）的一部分，而header中需要显式的设置content-type为application/x-www-form-urlencoded，这样对于服务器来说这就是一个表单提交数据的请求。点击登录按钮时，将双向绑定的formData提交到controller。如果是表单提交的数据，那么handler接收的方式不用添加任何额外的注解，利用名称对应，类型正确的方式就可以接收表单数据了。
Vue中axios 表单POST提交
二十一克阳光！的博客
01-24 1万+
刚开始使用Vue，里面的坑是一个接一个，今天就遇到一个axios POST传参的问题。 因为后端要求是按表单提交的形式给他数据， 我需要在请求中传递参数，然后按官方文档的格式开始操作，代码如下： axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .ca
ajax axios.get axios.post 方法 聊天机器人前后端交互
04-17
聊天机器人前后端交互 ajax学习
axios.js或axios.min.js下载
08-21
可以直接将js文件放前后端一起的项目中或项目中引用，避免在线引用的延迟。 适用于基于script标签引入的html页面
axios.min.js文件下载
08-02
一个基于 promise 的网络请求库,ajax的封装
Vue.js Ajax(axios)
12-13
Vue.js Ajax(axios) Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Github开源地址： 使用 response.data 读取 JSON 数据： GET 实例 ...
vue.js和axios.js的下载
09-07
vue.js和axios.js的下载直接引入到html中
axios异步提交表单数据的几种方法
12-08
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半钟头找到了答案 axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Form Data格式)是不一样的,在下面列举 默认格式Request Payload 直接使用axios发送异步请求,没任何处理的代码如下: const service = axios.create({}) do
axios post提交formdata的实例
11-29
vue框架推荐使用axios来发送ajax请求，之前我还写过一篇博客来讲解如何在vue组件中使用axios。但之前做着玩用的都是get请求，现在我自己搭博客时使用了post方法，结果发现后台（node.js）完全拿不到前台传来的参数。后来进过一番探索，终于发现问题所在。 post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中，可以用$_POST[“key”]的方式获取到key的值，在node中我们可以使用querystring
axios表单提交
香蕉你个芭呐呐的博客
11-14 1033
axios以表单方式提交数据时，需要将参数转换一下 第一种方法： header里的Content-Type设置为：application/x-www-form-urlencoded encodeURIComponent()会对它发现的任何非标准字符进行编码。防止特殊字符丢失。 var postData = []; for (var key in params) { postData.p...
axios发送post请求，将数据以表单形式提交
浮生几何。
05-10 3万+
在使用vue以及axios的过程中，需要将数据以表单形式提交给后台，现在总结一下处理方法。 axios 请求配置中，transformRequest配置允许在向服务器发送前，修改请求数据。 // `transformRequest` 允许在向服务器发送前，修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返...
axios发送post请求，如何提交表单数据？
dingdabao8888的博客
05-25 2592
axios发送post请求，提交表单数据的方式 默认情况下，axios将JavaScript对象序列化为JSON。要以application / x-www-form-urlencoded格式发送数据，可以使用以下选项之一。 1. 浏览器。在浏览器中，您可以使用 URLSearchParams API，如下所示： var params = new URLSearchParams...
Axios进行Post表单模式提交的二种方法
无名剑
03-22 1万+
Axios进行Post表单模式提交有如下两种方法 都需要指定表单提交的头信息 headers: { 'Content-Type': 'application/x-www-form-urlencoded' } 通过params参数传值 { url:'/login', method: 'post', headers: { 'Content-Type': 'application/x-...
axios.js提交表单数据的解决办法
甘焕的博客
07-19 1万+
axios因为小巧而性能强大受到很多人的追捧，但是其默认的数据提交方式为Payload，这样给后台解析带来了较大的困扰，因为难以从Request中获取到参数，所以默认的数据对象拼装无法成功 ，尤其是采用Spring MVC的@ModalAttribute注解时(没有使用@RequestBody注解)。解决方法如下： 1. 修改头部信息，将Content-Type由“application/x-ww
Vue axios 中提交表单数据(含上传文件)
lixixi
03-23 3304
转载自： http://www.jb51.net/article/118051.htm Vue axios 中提交表单数据(含上传文件) 转载 2017-07-06 作者：守候你的季节 我要评论 本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件)，具有一定的参考价值，有兴趣的可以了解一下 我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时...
"/add.ajax"如何转换成axios
05-10
将 "/add.ajax" 转换成 axios 请求的方式，可以按照以下步骤进行： 1. 导入 axios 库 ``` import axios from 'axios'; ``` 2. 发送 POST 请求 ``` axios.post('/add.ajax', { // 请求参数 }).then(response => { // 请求成功后的处理 }).catch(error => { // 请求失败后的处理 }); ``` 3. 发送 GET 请求 ``` axios.get('/add.ajax', { // 请求参数 }).then(response => { // 请求成功后的处理 }).catch(error => { // 请求失败后的处理 }); ``` 在以上代码中，POST 请求和 GET 请求的区别在于第二个参数，POST 请求需要将请求参数作为对象传递，而 GET 请求则可以将请求参数作为 URL 参数传递。另外，axios 也支持其他请求方法，具体可以查看 axios 的官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值