vue结合axios与后端进行ajax交互

以前vue官方推荐的ajax库是vue-resource, 现在改为axios,原因详见Retiring vue-resource

axios的github仓库

实现的效果:

异步请求

页面异步发出get请求获取数据,提交表单异步post数据到服务端

客户端

客户端代码

代码解析:

// 服务端请求地址
let url = 'http://local.php.com/index.php';
let vm = new Vue({
    el: "#app",
    data: {
        list: [],
        name: '',
        saying: '',
    },
    methods: {
        add() {
            // 传送的数据为json格式
            let data = JSON.stringify({
                name: this.name,
                saying: this.saying
            });
            axios.post(url, data)
            .then(function (response) {
                // console.log(response);
                // 获取服务端返回的数据
                vm.$data.list = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }
});
axios.get(url, {})
    .then(function (response) {
        vm.$data.list = response.data;
    })
    .catch(function (error) {
        console.log(error);
    })
    .then(function () {
        // always executed
    });

服务端

使用php作为服务端程序

服务端代码

代码解析:

<?php
    header("Access-Control-Allow-Origin:*"); // 如果客户端和服务端不同域,要加上这行代码,不然会报跨域错误
    $data = [
        1 => ['name' => '孙悟空', 'saying' => '我是在地球上成长的赛亚人'],
    ];
    
    $post = file_get_contents("php://input"); // 不要用$_POST接收数据
    if ($post) {
        $data[] = json_decode($post, true);
    }
    echo json_encode($data, true);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

Centos安装elasticsearch教程

elasticsearch安装是ytkah在做laravel电商站内搜索要实现的,通过自己的搜索和学习能力不算很费力解决了。下面就整理一下安装elasticse...

2113
来自专栏DeveWork

WordPress主题开发:添加主题更新提醒功能

WordPress官方的主题都可以自动更新升级,但如果是个人分享的免费或收费主题的话,通过下面的教程,也可以为你的私人主题添加版本更新提示。这个提示会直接显示在...

2228
来自专栏Laoqi's Linux运维专列

df,du,磁盘分区

df命令 df命令是用来报告磁盘文件系统的使用量 #df -h           @根据磁盘的大小适当的用适当的单位去表示 Kb,Mb,Gb,Tb #df -...

3527
来自专栏Python爬虫与数据挖掘

安装完Python之后,如何设置Python环境变量

人生苦短,我用Python。最近有许多加群的萌新在咨询Python安装的事宜,Python安装问题不大,可以戳这篇文章:。本以为安装Python之后就可...

1572
来自专栏ascii0x03的安全笔记

HTML5离线缓存攻击测试(二)

经过昨天的测试,发现使用离线缓存的网站会被攻击。但是,不使用离线缓存的网站就真的不会受到这样的攻击么? 据我理解,按照标准当浏览器请求manifest文件时,若...

3746
来自专栏小白课代表

限速?封号?不存在的!百度网盘高速不封号下载工具

❶下载文件,32位操作系统使用X86版本,64位系统使用X64版本,macOS/Linux使用jar文件。

1644
来自专栏七夜安全博客

后门编程(1)之双管道主动连接型

1464
来自专栏十月梦想

nodejs模块之url模块query查询(get提交案例)

前面简单介绍过url模块,这里补充一下query,就是url的目录文件以后的参数!

951
来自专栏java学习

1.1jdk的安装

一、什么是JDK,什么是JRE? JDK是整个Java的核心,包括了一个Java运行时环境(JRE)、Java工具以及基本的Java类库。JDK是Sun公司免费...

3415
来自专栏开源优测

AutoLine源码分析之调度管理器

AutoLine采用了Apscheduler库来实现AutoLine的测试用例的执行任务的调度管理

1071

扫码关注云+社区

领取腾讯云代金券