51Testing软件测试论坛

标题: Django添加js [打印本页]
作者: 测试积点老人    时间: 2018-12-5 16:15
标题: Django添加js
本帖最后由 测试积点老人 于 2018-12-5 16:25 编辑

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

这篇文章展示一个demo

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

引入js库

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


  1. STATIC_URL = '/static/'

  3. STATICFILES_DIRS = (
  4.     os.path.join(BASE_DIR, 'static'),
  5. )
复制代码
templates/hello.html
  1. {% load staticfiles %}#这句添加在html文件的最上面
  2. <script src="{% static "js/jquery-3.1.1.min.js" %}" type="text/javascript"></script>
  3. #注意看这里面的script标签和我们之前的script标签之间的不同
复制代码
到这基本上我们的配置就结束了。
其实我也不是很懂jQuery，昨天看师兄操作看的我眼花缭乱，估计还是得以后自己用的时候慢慢体会，我先把过程记录下来。

先说一下我们想要实现什么。
我们在后台建立了一个字典（当然这个是demo，我们以后上线的时候肯定是要在数据库里面调用这些数据的）：
  1. {'1':1234,"2":4321}
复制代码

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

hello.html

  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <script src="{% static "js/jquery-3.1.1.min.js" %}" type="text/javascript"></script>
  8. </head>
  9. <body>
  10. {{hello}}
  11. <select id="lineno">
  12.     <option>1</option>
  13.     <option>2</option>
  14. </select>
  15. </body>
  16. <div id="div">

  18. </div>
  19. <script type="text/javascript">
  20.     $("#lineno").change(function(){
  21.         var lineno = $("#lineno").val();
  22.         $.get("/app1/api?lineno=" + lineno,function(data){
  23.             $("#div").html(data);
  24.         })
  25.     });
  26. </script>
  27. </html>
复制代码

我对这段代码的理解：

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

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

下面这段script：

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

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

  1. from django.http import HttpResponse
  2. from models import myStudent
  3. from django.shortcuts import render


  6. def first_page(request):
  7.     student_list = myStudent.objects.all()
  8.     student_str = map(str, student_list)
  9.     context = {}
  10.     context['hello'] = ''.join(student_str)
  11.     # context['hello'] = 'hello yibo'
  12.     return render(request, 'hello.html', context)


  15. def api(request):
  16.     mmap = {'1': 1234, "2": 4321}
  17.     lineno = request.GET.get('lineno', '1')
  18.     return HttpResponse('{volume:' + str(mmap[lineno]) + '}')
复制代码

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

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

app1/urls.py

  1. from django.conf.urls import url,include
  2. from django.contrib import admin
  3. from views import first_page
  4. from views import api

  6. urlpatterns = [
  7.     url(r'^


  10. , first_page),
  11.     url(r'api/', api)
  12. ]
复制代码







欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/) Powered by Discuz! X3.2