Django知识点：Ajax-Vue

最新推荐文章于 2024-04-21 08:39:16 发布

铭铭铭铭天

最新推荐文章于 2024-04-21 08:39:16 发布

阅读量260

点赞数 2

分类专栏： Django框架文章标签： Ajax Vue

本文链接：https://blog.csdn.net/weixin_45542045/article/details/103465742

版权

Django框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Ajax 的使用

Ajax简介：异步的 js 和 xml

	普通请求：携带整个页面进行提交，提交成功或者失败之后要重新加载页面。如果页面中有大量的静态资源，体验不好，耗时。同时可能阻塞整个服务，用户体验差，请求的内容和响应的内容冗余。
	ajax 使用js 的语法编写，但是原生 js 的 ajax 很复杂，因为各种浏览器对 ajax 对象的兼容不同，如果想使用 js 的 ajax，首先需要兼容各种浏览器。我们通常使用 jquery 的 ajax。

发送一个局部请求，整体的页面不重新加载，只是局部刷新
发送一个异步请求，请求的过程中不会阻塞服务

Ajax 的结构

$.ajax({
	url:'',		# ajax 请求的路径
	type:'',		# ajax 请求的类型，一般是get和post
	data:'',		# ajax 请求，在post请求中
	success:function(data){
		// 请求成功之后执行的
	},
	error:function(error){
		// 请求报错之后执行
	}
})

Ajax完成get请求

在html 页面导入jquery 包

完成一个get 请求，需要两个视图函数。

 1. 编写html
 	提供input：获取数据
 	提供按钮：触发方法，ajax 请求
 	ajax：发送get 请求
 		url：发送地址，get请求，需要拼接参数到url 中
 		data：发送数据
 		type：发送的请求方式，get
 2. 第一个视图，提供页面支持，返回页面
 3. 第二个视图：处理 ajax 请求，返回响应
 	响应内容：Json对象

视图：

from django.http import JsonResponse

def ajaxdemo(request):
	return render(request,"ajaxdemo.html")

def ajaxreq(request):
	print (request.GET)
	username = request.GET.get("username")
	password = request.GET.get("password")
	result = {"code":10000,"msg":""}

	if username and password:
		flag = User.objects.filter(name=username,password=setPassword(password)).exists()
		if flag:
			result["msg"]="存在"
		else:
			result['msg'] = '不存在'
			result['code'] = 10001
	else:
		result["msg"] = "密码或者用户名为空"
		result["code"] = 10002
	return JsonResponse(result)

模板：

<!DOCTYPE html> 
<html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>ajaxdemo</title> 
	<script src="/static/js/jquery.min.js"></script> 
</head> 
<body> 
	<h3>校验用户名密码</h3> 
	<form action=""> 
		<input id="username" type="text" name="username" placeholder="用户名"><br> 
		<input id="password" type="password" name="password" placeholder="密码"><br>
		<input id="checkvalue" type="button" value="校验"> 
	</form> 
	<p id="content"></p>
	<script> 
		$("#checkvalue").click( 
			function () { 
				{#console.log("方法")#} 
				// 获取到填写的数据 
				var username = $("#username").val();
				var password = $("#password").val();
				// 发送一个请求 ajax 请求
				var url="/ajaxreq/?username=" + username + "&password=" + password;
				$.ajax({
					url:url, // 请求要请求的地址
					type:"get", // 请求的类型 get post
					data:"", // 请求要发送的数据 常在post请求 中使用，get请求只需要拼接请求的url就可以				
					success:function (data) { 
						// 请求成功之后要执行的方法 
						// data 接受请求成功之后的返回值
						console.log(data["code"]);
						console.log(data["msg"]);
						$("#content").text(data["msg"])
					},
					error:function (error) { 
						// 请求失败之后要执行的内容
					}
				})
			}
		)
	</script>
</body>
</html>

Ajax 完成post请求

实现一个注册功能

与实现get请求不一样的是：get请求的参数是在路由中拼接的
post 要构建数据对象：包含请求参数
post 请求要开启 csrf_token

模板：

<form action="" method="post">
     {% csrf_token %}
    名字：<input id = "username" type="text" name="username"><br>
    密码：<input id = "password" type="password" name="password"><br>
{#    <input type="submit" value="提交">#}
    <input id = "check_value" type="button" value="提交">
</form>
<script>
    $("#check_value").click(
        function () {
            // 获取值
            username = $("#username").val();
            password = $("#password").val();
            //url = "/ajax_post_data/?username="+username+"&password=" + password;
            // 构造数据字典
            send_data = {
                "username":username,
                "password":password,
                "csrfmiddlewaretoken":"{{ csrf_token }}",
            };
            console.log(send_data)
            url = "/ajax_post_data/";
            $.ajax(
                {
                    url:url,
                    type:"post",
                    data:send_data,
                    success:function (data) {
                        console.log(data);
                    },
                    error:function (error) {
                        console.log(error);
                    }
                }
            )
        }
    )
</script>

视图：

def ajax_post(request):
	return render(request,'ajax_post.html')

def post_data(request):
	result = {}
	username = request.POST.get('username')
	password = request.POST.get('password')
	
	return JsonResponse(result)

Vue

前端的框架，主要功能：数据的绑定：遵循的设计模式 MVVM

Vue的使用

静态数据的绑定

需要先导包：<script src="/static/js/vue.min.js"></script>

<body>
	{% verbatim %}  {# 标识 下面的内容不使用django的语法#} 
	<div id="content">
		helloworld{{ name }} // vue 语法进行数据的绑定
		{{ age }}
	</div>
	{% endverbatim %} // 标识结束
	<script>
		var vue = new Vue(
			{
				el:"#content", // 代表选中指定的元素
				data:{		// 要渲染的数据
					name:"zhangsan",
					age:123
				}
			}
		)
	</script>
</body>

Vue 语法

<body>
	{# 标识 下面的内容不使用django的语法#}
	{% verbatim %}
	<div id="content">
		<p>数据的绑定{{ name }}</p>
		<p v-bind:id="userid"> 属性的绑定</p>
		<p v-if="flag"> 判断绑定 </p>
		
		<p v-for = "one in pythonlist"> 循环绑定 {{ one }} </p>

		<p v-on:click="alert"> 事件的绑定 </p>
	</div>
	{% endverbatim %}
	<script>
		var vue = new Vue(
			{
				el:"#content",
				data:{
					name:"zhangsan",
					age:123,
					style:"color:red;",
					userid:1,
					flag:0,
					pythonlist:['fdsfsf','fdsfdsf','xcxzcc'],
				},
				methods:{
					"alert":function () {
						alert("hello world")
					}
				},
			}
		）
	</script>
</body>

Vue 完成动态数据的渲染

Vue不能够完成动态数据的渲染，需要依赖 vue-resource
需要导包，代码：<script src="/static/js/vue-resource.js"></script>
在处理数据的时候，使用Vue之前，需要声明使用的是vue-resource
代码：Vue.use(VueResource);

铭铭铭铭天

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Django知识点：Ajax-Vue

ajax 的使用Ajax简介：异步的 js 和 xml 普通请求：携带整个页面进行提交，提交成功或者失败之后要重新加载页面。如果页面中有大量的静态资源，体验不好，耗时。同时可能阻塞整个服务，用户体验差，请求的内容和响应的内容冗余。 ajax 使用js 的语法编写，但是原生 js 的 ajax 很复杂，因为各种浏览器对 ajax 对象的兼容不同，如果想使用 js 的 ajax，首先需要兼容各种...
复制链接

扫一扫

专栏目录