axios 简单常用笔记

最新推荐文章于 2023-09-20 15:48:24 发布
最新推荐文章于 2023-09-20 15:48:24 发布
阅读量120 收藏
点赞数
文章标签： json php javascript ViewUI

简单认知：

1、config.data是POST参数，config.params是GET参数

 

 

axios(url, [config]) + qs + application/x-www-form-urlencoded

https://github.com/axios/axios#axioscreateconfig

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Vue -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
    <!-- jquery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <style>
    html, body{
        margin: 0;
        padding: 0;
    }

    #app {

    }
    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script>

axios('http://120.77.146.174:84/api/admin/user/sysUser/login', {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
      data: Qs.stringify({
          userAccount: 'dgeduc-b',
          userPwd: '123456',
          type: 'account',
       }),
}).then(response => {
    console.log(20181203100805, response)
    // return response.json()
})
</script>
</html>

 

 

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>

/**
 * get 请求
 */
axios.get('http://192.168.31.97/index.php?a=123').then(response => {
    console.log(20181021221522, response)
})

/**
 * post application/x-www-form-urlencoded;charset=utf-8
 * https://github.com/axios/axios#browser
 * 推荐使用 qs： 
 * $ cnpm install qs
 * const params = qs.stringify({ 'a': 123 })
 */
const params = new URLSearchParams();
params.append('a', '123');
axios.post('http://192.168.31.97/index.php', params, {
    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
}).then(response => {
    console.log(20181021221338, response)
})

/**
 * post application/json;charset=utf-8
 */
axios.post('http://192.168.31.97/index.php', {a: 123}).then(response => {
    console.log(20181021221338, response)
})

// ajax（默认是application/json;charset=utf-8）
axios({
  method: 'post',
  url: 'http://192.168.31.97/index.php',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(response => {
    console.log(20181021225057, response)
})

// ajax（指定为application/x-www-form-urlencoded;charset=utf-8）
const params2 = new URLSearchParams();
params2.append('firstName', 'Fred');
params2.append('lastName', 'Flintstone');
axios({
  method: 'post',
  url: 'http://192.168.31.97/index.php',
  data: params2,
  headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
}).then(response => {
    console.log(20181021225057, response)
})
</script>
</html>

 

 

index.php

<?php 

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:x-requested-with,content-type'); 

// post（form） 和 get请求
var_dump($_REQUEST);
// application/json;charset=utf-8 的数据必须这样使用
var_dump($GLOBALS['HTTP_RAW_POST_DATA']);

 

weixin_34258782
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Simpllist:React本机简单笔记应用程序
05-15
在“Simpllist: React Native简单笔记应用程序”中，我们看到一个基于React Native构建的轻量级笔记应用实例。这个应用可能包含了创建、编辑和查看笔记的基本功能，让用户能够在手机上方便地记录和管理他们的想法。 ...
vue相关笔记vuex等等
10-10
13. **v-bind和v-for**（v-bind和v-for.docx）：`v-bind`用于动态绑定属性，而`v-for`用于循环渲染列表，它们是Vue中非常基础且常用的指令。 这些笔记涵盖了Vue开发的基本流程，从入门到进阶，对于理解Vue全家桶的...
FrontEnd笔记 -- axios
L小Ray想有腮
02-03 106
文章目录
axios 学习笔记
weixin_33939843的博客
09-29 80
官方文档地址：https://github.com/axios/axios axios 是一个基于 Promise 的HTTP库，可以用在浏览器和 node.js 中 特性： • 从浏览器发起 XMLHttpRequests 请求 • 从 node.js 发起 http 请求 • 支持 Promise API • 拦截请求和响应 • 转换请求和响应数据 • 取消请求 • 自...
axios使用笔记
weixin_33804990的博客
04-20 82
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特点： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 我在做Spring Boot+Vue前后端分离项目的时候，是使用...
Axios 笔记
Alice_Lee_Lee的博客
07-13 179
Axios的使用和源码分析
Axios笔记
最新发布
qq_27474555的博客
09-20 504
Axios基于promise网络请求库，作用于node.js和浏览器中（即同一套代码可以运行在node.js和浏览器中)，在服务器中他使用原生node.js http,在浏览器端则使用XMLHttpRequest。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。如果你的环境不支持 ES6 Promise，你可以使用polyfill。在使用别名方法时， url、method、data 这些属性都不必在配置中指定。
react教学笔记，从入门到精通
06-06
12. **社区生态**：React拥有丰富的生态系统，包括Ant Design、Material-UI等UI库，axios用于异步请求，webpack和Babel用于构建和编译，等等。 这份“react教学笔记，从入门到精通”应该会详细解释以上知识点，并...
前后端分离博客项目.zip
08-11
然后数据层，我们常用的是Mybatis，易上手，方便维护。但是单表操作比较困难，特别是添加字段或减少字段的时候，比较繁琐，所以这里我推荐使用Mybatis Plus（mp.baomidou.com/），为简化开发而生，只… CRUD 操作，...
前端开发学习笔记，练手Vue小项目
09-05
Vue.js是由尤雨溪开发的渐进式框架，它允许开发者逐步地采用框架的不同部分，从简单的视图层到复杂的单页应用。Vue的核心库专注于视图层，易于与其他库或现有项目集成。 2. **项目结构** 在"前端开发学习笔记，练...
axios笔记
weixin_41971413的博客
08-03 74
axios笔记 axios上传文件案例 **********************************上传多个文件************************************** <input v-for="arr in array" type="file" ref = "file" > <button @click="upload">upload</button> data(){ return { arr
axios学习笔记
MonsterK666的博客
03-26 95
axios学习笔记 为什么不用jq-ajax？ 因为jQurey代码有1w+行，为重量级框架 vue中不需要jQurey 1、特点 //在浏览器中发送XMLHttpRequests请求 //在node.js中发送 http请求 //支持Promise API //拦截请求和响应 //转换请求和响应数据等等 支持多种请求方式 axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axi
Axios简单笔记
南城趣味的博客
06-05 228
Axios的功能特点 1.在浏览器中发送XMLHttpRequests请求 2.在node.js中发送http请求 3.支持Promise API 4.拦截请求和响应 5.转换请求和响应数据 6.其他... Axios框架的安装使用 在终端中，通过命令安装 npm install axios --save 在main.js中导入 import axios from 'axios' Axios的请求方式 1.axi...
axios笔记一
weixin_30951389的博客
03-26 91
1.在create-react-app创建的react项目中使用axios，通过本地json数据 模拟前后台交互，所遇到的问题以及解决方法： 将json文件放在mock文件夹下，mock放在跟目录下，通过axios请求，报错404，找不到文件，原因是自动打包工具没有额外构建除了src目录外的文件， 可以将mock文件夹放在public目录下； 同时，因为是请求的本地数据，使用pos...
get是不是axios的常用方法
06-10
是的，`get`是`axios`的常用方法之一。在`axios`中，`get`方法用于发起 GET 请求，其语法如下： ```javascript axios.get(url[, config]) ``` 其中，`url`是请求的URL地址，`config`是请求的配置对象，可以包含...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值