Django添加js

测试积点老人 · 发表于 2018-12-5 16:15:38

本帖最后由测试积点老人于 2018-12-5 16:25 编辑

我们之前完整的搭建了一个app，同时能够使数据库中的数据在前台页面中显示出来。那么，我们如何将用户在前台页面中的操作返回给后台呢？

这篇文章展示一个demo

在Django搭建第一个应用
的基础上，我们继续。

引入js库

我们写页面很多时候需要外部js库的支持，那么这些文件应该放在哪里呢？又该如何配置呢？

建立static文件夹
配置相关文件
接下来，想要使用这些js我们还需要进行一些配置：
settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

复制代码

templates/hello.html

{% load staticfiles %}#这句添加在html文件的最上面
<script src="{% static "js/jquery-3.1.1.min.js" %}" type="text/javascript"></script>
#注意看这里面的script标签和我们之前的script标签之间的不同

复制代码

到这基本上我们的配置就结束了。
其实我也不是很懂jQuery，昨天看师兄操作看的我眼花缭乱，估计还是得以后自己用的时候慢慢体会，我先把过程记录下来。

先说一下我们想要实现什么。
我们在后台建立了一个字典（当然这个是demo，我们以后上线的时候肯定是要在数据库里面调用这些数据的）：

{'1':1234,"2":4321}

复制代码

在前端页面放了一个下拉框，想要在选1的时候，页面显示1234，在选2的显示4321。

hello.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static "js/jquery-3.1.1.min.js" %}" type="text/javascript"></script>
</head>
<body>
{{hello}}
<select id="lineno">
<option>1</option>
<option>2</option>
</select>
</body>
<div id="div">
</div>
<script type="text/javascript">
$("#lineno").change(function(){
var lineno = $("#lineno").val();
$.get("/app1/api?lineno=" + lineno,function(data){
$("#div").html(data);
})
});
</script>
</html>

复制代码

我对这段代码的理解：

<select>建立一个下拉框，两个选项

<div>建立一个显示结果的div

下面这段script：

就是在下拉框被改变的时候，我们获取用户选择的下拉框中的值，之后拼接一个链接："/app1/api?lineno=" + lineno，并用get方法得到这个链接里面的结果，返回到我们的div中显示

我们在这个页面，改变lineno的值，就可以根据这个key找到对应的后台数据中的value
那么这个链接我们是怎么处理的呢？
首先得有视图V，修改app1/views.py

from django.http import HttpResponse
from models import myStudent
from django.shortcuts import render
def first_page(request):
student_list = myStudent.objects.all()
student_str = map(str, student_list)
context = {}
context['hello'] = ''.join(student_str)
# context['hello'] = 'hello yibo'
return render(request, 'hello.html', context)
def api(request):
mmap = {'1': 1234, "2": 4321}
lineno = request.GET.get('lineno', '1')
return HttpResponse('{volume:' + str(mmap[lineno]) + '}')

复制代码

注意到我们在上面的页面上添加了api函数，我理解的是通过request.GET.get函数，得到用户输入的参数，也就是？后面的参数，之后用HttpResponse返回一个页面的结果

那么根据我们django框架的设计理念，还需要一个URL和api函数之间的映射：

app1/urls.py

from django.conf.urls import url,include
from django.contrib import admin
from views import first_page
from views import api
urlpatterns = [
url(r'^
, first_page),
url(r'api/', api)
]

复制代码

		自动登录	找回密码
密码			(注-册)加入51Testing

Django添加js

站长推荐 /1