Vue之axios发送Ajax请求

2.10 axios发送ajax请求

axios github

2.10.1 准备工程

创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文件

2.10.2 准备html和html显示

在模板文件中创建一个axios.html,内容如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 开发环境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"><span>{{ message }}</span> <br><a href="javascript:;">登录</a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({el: '#app',delimiters:["[[","]]"],data: {message: 'Hello Vue!',},
})
</script>
</html>

创建视图并加载模板的html

#url设置
from django.conf.urls import url
from users.views import ShowLoginViewurlpatterns = [url(r'^show/$',ShowLoginView.as_view()),
]#视图
class ShowLoginView(View):def get(self,request):return render(request,'axios.html')

2.10.3 导入axios,并发送GET/POST请求

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><!-- 开发环境版本 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 导入axios --><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"><span>{{ message }}</span> <br><span>[[ message ]]</span> <br><a @click="login" href="javascript:;">登录-GET</a> <br><a @click="login2" href="javascript:;">登录-GET2</a> <br><a @click="login3" href="javascript:;">登录-POST</a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({el: '#app',delimiters:["[[","]]"],data: {message: 'Hello Vue!',},methods:{login:function(){let url = 'http://127.0.0.1:8000/login/?username=admin&password=123';axios.get(url).then(response=>{if(response.data.code == '200'){this.message=response.data.info.username;}else if (response.data.code == '400') {this.message=response.data.msg;}}).catch(error=>{console.log(error)})},login2:function(){let url = 'http://127.0.0.1:8000/login/';axios.get(url,{params:{"username":"admin","password":"123"}}).then(response=>{if(response.data.code == '200'){this.message=response.data.info.username;}else if (response.data.code == '400') {this.message=response.data.msg;}}).catch(error=>{console.log(error)})},login3:function(){let url = 'http://127.0.0.1:8000/login/';axios.post(url,{"username":"admin","password":"123"}).then(response=>{if(response.data.code == '200'){this.message=response.data.info.username;}else if (response.data.code == '400') {this.message=response.data.msg;}}).catch(error=>{console.log(error)})}}
})
</script>
</html>

1.因为Vue的模板变量和django的模板变量分隔符冲突,所以需要修改Vue的分隔符delimiters:["[[","]]"]

2.箭头函数解决这个指向的问题

2.10.4 后台代码

#定义路由
from django.conf.urls import url
from users.views import ShowLoginView, LoginViewurlpatterns = [url(r'^show/$',ShowLoginView.as_view()),url(r'^login/$',LoginView.as_view()),
]
#定义视图
class LoginView(View):def get(self, request):#获取参数username = request.GET.get('username')password = request.GET.get('password')#验证参数并返回相应if username == 'admin' and password == '123':return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})else:return JsonResponse({'code': 400,'msg':'账号或密码错误'})def post(self, request):# 获取参数data = json.loads(request.body.decode())username = data.get('username')password = data.get('password')# 验证参数并返回相应if username == 'admin' and password == '123':return JsonResponse({'code': 200, 'msg':'ok','info': {'username': username, 'user_id': '666'}})else:return JsonResponse({'code': 400,'msg':'账号或密码错误'})

Vue之axios发送Ajax请求相关推荐

jquery发送ajax请求_复习之Vue用axios发送ajax请求
Axios是一个基于promise的HTTP库. 浏览器支持情况:Chrome.Firefox.Safari.Opera.Edge.IE8+. 官网:https://github.com/axios/ ...
promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
axios 发送 AJAX请求
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
前端学axios还是ajax,【Web前端问题】axios发送ajax请求问题？
在程序里借助axios库发送ajax请求,但是失败了,返回这个然而在同一个位置换成jquery的代码却能成功,代码如下,不知axios哪里写的不对??谢谢~ //axios axios.post(& ...
Vue项目首页_使用axios发送ajax请求
安装axios: npm install axios --save 在Home.vue中发送一个ajax请求,然后把数据传递给子组件. 在Home.vue中: import axios from ' ...
vue小项目总结与笔记【六】——使用axios发送ajax请求
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 安装: npm install axios --save 引入: import axios from ...
vue 使用axios发送的请求使用md5加密
之前使用axios发送请求都是直接发送,没有加入任何加密方式,但是这种情况其实是不安全的,最近项目要求使用md5进行加密. 在项目根目录下面安装md5 npm install --save js-md ...
vue中使用axios发送ajax请求
1 get请求: html代码: js代码: 2 post请求 3 综合方法综合方法也可以传递参数的,分别和get请求和post请求传递的参数形式是一样的.... 一个简单的总结,后面再接着完善! ...

Vue之axios发送Ajax请求

2.10 axios发送ajax请求

2.10.1 准备工程

2.10.2 准备html和html显示

2.10.3 导入axios,并发送GET/POST请求

2.10.4 后台代码

Vue之axios发送Ajax请求相关推荐

最新文章

热门文章