vue2中使用ajax
vue中本身没有ajax功能,需要使用扩展,现在推荐使用的是axios,github地址如下
https://github.com/axios/axios
下面各个示例
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>vue axios使用</title>
<script type="text/javascript" src="{$Think.config.xinxi}/vue.js"></script>
<script type="text/javascript" src="{$Think.config.xinxi}/axios.min.js"></script>
</head> <body>
<div id="app"></div>
<script>
var test=new Vue({
el:"#app",
data:{ },
methods:{ send:function(){ axios({
method: 'get',
url: 'http://127.0.0.1/xinxi/public/index.php/index/index/szxx'
})
.then(function (response) {
console.log(response)
})
.catch(function (error) {
console.log(error)
}) }
}
});
</script> </body>
</html>
在本地打开进行ajax访问会有跨域问题,会导致无法访问,跨域问题的解决可以参考这篇文章:https://blog.csdn.net/qq_36575992/article/details/80338538
file:///C:/Users/Administrator/Desktop/vue/index.html

所以我是在本地服务器使用访问的http://127.0.0.1/xinxi/public/index.php/index/index/axios

vue2中使用ajax的更多相关文章
- vue - Vue中的ajax
只有在ajax才能找回一点点主场了,vue中的ajax一天整完,内容还行,主要是对axios的运用. 明天按理说要开始vuex了,这个从来都是只耳闻没有眼见过,明天来看看看看是个什么神奇的东西. 一. ...
- Jquery中的Ajax
AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- PHP--------TP中的ajax请求
PHP--------TP中的ajax请求 以jQuery中的ajax为例: (1)引入jQuery 通过模板替换表示路径,我们可以自定义模板替换变量(在config中定义) /*自定义模板替换标签* ...
- jquery中的ajax参数
jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...
- 如何在Vue2中实现组件props双向绑定
Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...
- javascrpt 中的Ajax请求
回顾下javascript中的Ajax请求,写一个小例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 项目中关于ajax jsonp的使用
项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() { $.ajax({ ...
随机推荐
- hdu-5642 King's Order(数位dp)
题目链接: King's Order Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Othe ...
- Java 集合常用特点
1:集合:1) Collection(单列集合) --------------------------------------------------------------------- ...
- 【JSON解析】JSON解析
前三篇博客分别介绍了xml的三种解析方法,分别是SAX,DOM,PULL解析XML,兴趣的朋友可以去看一下这[XML解析(一)]SAX解析XML,[XML解析(二)]DOM解析XML,[XML解析(三 ...
- Poj 1316 Self Numbers(水题)
一.Description In 1949 the Indian mathematician D.R. Kaprekar discovered a class of numbers called se ...
- Nginx正则表达式之匹配操作符详解
nginx可以在配置文件中对某些内置变量进行判断,从而实现某些功能.例如:防止rewrite.盗链.对静态资源设置缓存以及浏览器限制等等.由于nginx配置中有if指令,但是没有对应else指令,所以 ...
- 三 akka学习 actor的例子
(转载: http://blog.csdn.net/chenleixing/article/details/44044243 ) Java并发编程的4种风格:Threads,Executors,For ...
- sql中in和exist语句的区别?(补充了left join和right join)
in和exists(摘录自百度)in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询. 如果两个表中一个较小,一个是大表,则子查询表大的用exi ...
- python 基础 字典 增删改查
content = {"name":"wd","pc":{"phone":111111,"age": ...
- Load Runner 变量、参数的简单使用
Action(){ 定义数组时一定要指明大小 变量定义一定要放在所以操作之前,放在脚本最前面 int num ;//定义数值变量 int numy[5];//定义整型数组 char *str1 ...
- RN控件之ProgressBarAndroid进度条
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...