vue与php通过axios进行数据交互

现在太忙，贴一下代码，有空再详细写一下。下面是亲测可用的

可以参考：
https://segmentfault.com/q/1010000009057655

方法一：
只需要很小的改动，把它变成字符串提交就好。

var params = 'ajax='+encodeURIComponent(JSON.stringify({username: 'admin',password: '123456'
}));

axios.post(‘test.php’, params).then(res => console.log(res.data))
在服务器端 var_dump(json_decode(urldecode($_POST[‘ajax’]))); 了。
如果是要模拟jQuery的Ajax请求,就再加个config
var url = …
var params = ‘ajax=’+encodeURIComponent(JSON.stringify(…));
var config = {headers: {‘X-Requested-With’: ‘XMLHttpRequest’}};
axios.post(url, params, config)…
接下来在PHP里,就可以用你熟悉的的IS_AJAX、isXmlHttpRequest之类的了

方法二：
1.传的是一个json对象，可以用file_get_contents(“php://input”)获取到json串，然后转化为object获取属性
2.如果想用$_POST获取，修改下代码

var params = new URLSearchParams();
params.append('username', 'admin');
params.append('password', '123456');
axios.post('test.php', params).then(res => console.log(res.data));</script>

可以看下文档 Using application/x-www-form-urlencoded format这个段落

代码一：php

<?phpheader("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");if($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");exit;
}                      //这些是解决跨域问题的$params=json_decode(urldecode($_POST['ajax']),true);$username= $params['username'];
echo json_encode($username);?>

这里json_decode后面需要加入true参数，是因为这样才能转换成数组形式

代码二：
前端：

post(){axios.post("http://localhost/www/html/exercise.php",json).then(function (response) {console.log(response.data);}).catch(function (error) {console.log(error);});}

后端：

  $params=json_decode(file_get_contents("php://input"),true);$username=$params['number'];echo json_encode($username);

完整vue代码

<template><div>现在进行测试，vue与php进行post数据交互<br><br><input type="button" name="login" value="数据提交" @click="post"></div></template><script>
import axios from "axios"
import qs from "qs"var json={"number":"123456789"
};var params = 'ajax='+encodeURIComponent(JSON.stringify({username: 'admin',password: '123456'
}));export default {
methods:{/*post(){
axios.post('http://localhost/www/html/exercise.php', params).then(res => console.log(res.data))}*/
post(){axios.post("http://localhost/www/html/exercise.php",json).then(function (response) {console.log(response.data);}).catch(function (error) {console.log(error);});}}
}
</script>

vue与php通过axios进行数据交互相关推荐

Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新
问题: 用ajax或者axios,get数据是正常的.但是渲染数据时data一直为空问题代码: 下面代码看起来是正常的,但是当运行的时候会报错: 这时候你运行时会发现,数据可以请求到,但是会报错Ty ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
Vue前端如何与后端进行数据交互
1.安装 npm install axios --save 2.在main.js文件引入 import Axios from 'axios';//后台交互 Vue.prototype.$http=Ax ...
easy-table-vue+Vue、SpringBoot+Mybatis实现MVVM模型前后台数据交互
原文链接:https://www.cnblogs.com/wlovet/p/10980579.html 根据原贴在搭建过程中出现的问题,我在该博客https://blog.csdn.net/Sun_o ...
Vue前后台数据交互实例演示，使用axios传递json字符串、数组
Vue 前后台数据交互实例演示第一章:后台实现 ① Python 启用 Flask 服务器 ② 后台启用成功验证第二章:前台实现 ① Vue 使用 Axios 实现接收 json 字符串.数组数据 ...
Vue与服务端数据交互 [ axios ]
Vue生命周期每个Vue实例在被创建到销毁要经过一系列的过程,这整个过程称为Vue实例的生命周期 Vue在生命周期不同的阶段点会自动运行一些函数, 这些函数称为Vue生命周期的钩子(hook)函数 ...
Vue中的数据交互axios
数据交互 ajax: 原理必须要能说出来流程即可. jquery_ajax. 我们promise要结合它 Promise + async函数的前端的主要工作:1. 画页面.2. 请求ajax (后端 ...
Vue——进阶(过滤器、数据交互、生命周期、ES6语法)
目录过滤器数据交互生命周期函数 ES6语法过滤器 1.定义过滤器: (1)局部过滤器: new Vue({el:"#app",filters:{// 写在vue对象里面的过 ...
VUE3@/cli数据交互（axios）
数据交互: axios是一个基于Promise的HTTP请求的客户端,用来发送AJAX请求使用axios的步骤: 执行npm install axios -S 安装模块通过import axio ...

vue与php通过axios进行数据交互

vue与php通过axios进行数据交互相关推荐

最新文章

热门文章